@charset "utf-8";

/* work
------------------------------------------------------------------------------------------------------------*/


#p_work {
 background-color: #FFF;
 font-size: 12px;
 margin: 0 auto 4% auto;
 width: 92%;
}

#p_work h1 {
 border-bottom: #F74B79 1px solid;
 background-size: 30px 20px;
 background-color: #FFF;
 border-top: #F74B79 1px solid;
 color: #F74B79;
 font-size: 16px;
 display: block;
 height: 10%;
 margin-top: 1px;
 max-height: 50px;
 padding: 6px 10px;
 -webkit-background-size: 30px 20px;
 -moz-background-size: 30px 20px;
}

#p_work h1 span {
 margin: 0 auto;
 width: 92%;
}

#p_work h2 {
 color: #F74B79;
 font-size: 14px;
 padding: 4%;
 margin: 0 auto;
 width: 92%;
}

#p_work #p_workblock {
 padding: 4%;
 margin: 0 auto;
 width: 92%;
}

#p_work .p_workTitle {
 margin: 4% auto;
 width: 92%;
}

#p_work .p_workTitle span.name { font-size: 12px; }

#p_work .p_workPhoto {
 display: block;
 float: left;
}

#p_work .p_workTitleName {
 display: block;
 float: left;
}

#p_work .p_workTxt {
 margin: 4% auto;
 width: 92%;
}

#p_work .p_workTxt span {
 color: #000;
 font-size: 12px;
}

/* p_work .p_prof
------------------------------------------------------------------------------------------------------------*/


#p_work .p_prof {
 display: block;
 margin: 4% auto 4% auto;
 width: 92%;
}

#p_work .p_prof li.p_profphoto {
 display: block;
 float: left;
 width: 40%;
}

#p_work .p_prof li.p_Txt {
 display: block;
 float: left;
 margin-left: 5%;
 width: 55%;
}

#p_work .p_prof li img { width: 100%; }

#p_workPhoto {
 margin: 0 auto;
 overflow: auto;
}

/* p_workPhoto #slider2
------------------------------------------------------------------------------------------------------------*/

#p_workPhoto #slider2 { width: 180%; }

#p_workPhoto #slider2 li {
 float: left;
 width: 50%;
}

#p_workPhoto #slider2 li img { width: 90%; }

/* p_workPhoto #slider3
------------------------------------------------------------------------------------------------------------*/

#p_workPhoto #slider3 { width: 270%; }

#p_workPhoto #slider3 li {
 float: left;
 width: 33.3%;
}

#p_workPhoto #slider3 li img { width: 90%; }

/* p_workPhoto #slider4
------------------------------------------------------------------------------------------------------------*/

#p_workPhoto #slider4 { width: 360%; }

#p_workPhoto #slider4 li {
 float: left;
 width: 25%;
}

#p_workPhoto #slider4 li img { width: 90%; }

/* p_workPhoto #slider5
------------------------------------------------------------------------------------------------------------*/

#p_workPhoto #slider5 { width: 450%; }

#p_workPhoto #slider5 li {
 float: left;
 width: 20%;
}

#p_workPhoto #slider5 li img { width: 90%; }

/* p_workPhoto #slider6
------------------------------------------------------------------------------------------------------------*/

#p_workPhoto #slider6 { width: 540%; }

#p_workPhoto #slider6 li {
 float: left;
 width: 16.6%;
}

#p_workPhoto #slider6 li img { width: 90%; }

/* p_workPhoto #slider7
------------------------------------------------------------------------------------------------------------*/

#p_workPhoto #slider7 { width: 630%; }

#p_workPhoto #slider7 li {
 float: left;
 width: 14.28%;
}

#p_workPhoto #slider7 li img { width: 90%; }

/* p_workPhoto #slider8
------------------------------------------------------------------------------------------------------------*/

#p_workPhoto #slider8 { width: 720%; }

#p_workPhoto #slider8 li {
 float: left;
 width: 12.5%;
}

#p_workPhoto #slider8 li img { width: 90%; }

/* p_workPhoto #slider10
------------------------------------------------------------------------------------------------------------*/

#p_workPhoto #slider10 { width: 900%; }

#p_workPhoto #slider10 li {
 float: left;
 width: 10%;
}

#p_workPhoto #slider10 li img { width: 90%; }

/* p_workPhoto #slider12
------------------------------------------------------------------------------------------------------------*/

#p_workPhoto #slider12 { width: 1080%; }

#p_workPhoto #slider12 li {
 float: left;
 width: 8.33%;
}

#p_workPhoto #slider12 li img { width: 90%; }

/* p_work .work_navi
------------------------------------------------------------------------------------------------------------*/

#p_work .work_navi {
 padding: 2% 0;
 margin: 0 auto;
 width: 100%;
}

#p_work .work_navi ul {
 width: 92%;
 margin: 0 auto;
 padding: 2% 0;
}

#p_work .work_navi ul li {
 color: #eb827c;
 font-size: 16px;
 padding: 8px 0;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 width: 48%;
}

#p_work .work_navi ul li.work_prev {
 background: url(../../common/img/bg_prev.png) left center no-repeat;
 float: left;
 text-align: left;
 background-size: 30px 30px;
 -webkit-background-size: 30px 30px;
 -moz-background-size: 30px 30px;
 font-weight: bold;
}

#p_work .work_navi ul li.work_next {
 background: url(../../common/img/bg_next.png) right center no-repeat;
 float: right;
 text-align: right;
 background-size: 30px 30px;
 -webkit-background-size: 30px 30px;
 -moz-background-size: 30px 30px;
 font-weight: bold;
}

#p_work .work_navi ul li span { color: #F74B79; }

#p_work .work_navi ul li img {
 margin: 0 3%;
 min-width: 15%;
 max-width: 15%;
 vertical-align: middle;
}

/*p_work .p_socialwork
------------------------------------------------------------------------------------------------------------*/

#p_work .p_socialwork {
 width: 92%;
 height: 25px;
 display: block;
 margin: 6% auto 4% auto;
 position: relative;
 display: block;
}

#p_work .p_socialwork li {
 width: 65px !important;
 position: absolute;
}

#p_work .p_socialwork .tw {
 left: 0px;
 top: -2px;
}

#p_work .p_socialwork .mixi {
 left: 30%;
 top: -2px;
}

#p_work .p_socialwork .fb {
 left: 70%;
 top: -2px;
}

#p_work .p_socialwork .hateb {
 left: 0;
 top: 0;
}

#p_work .p_socialwork .gplus {
 left: 30%;
 top: 0;
}

/* p_detailList
------------------------------------------------------------------------------------------------------------*/



#p_detailList {
 margin: 0 auto 4% auto;
 width: 92%;
}

#p_detailList h1 a {
 border-bottom: #F74B79 1px solid;
 background: url(../../common/img/bg_link.png) right center no-repeat #FFF;
 border-top: #F74B79 1px solid;
 color: #F74B79;
 font-size: 16px;
 display: block;
 height: 10%;
 margin-top: 1px;
 max-height: 50px;
 padding: 6px 10px;
 background-size: 30px 30px;
 -webkit-background-size: 30px 30px;
 -moz-background-size: 30px 30px;
 text-align: left;
}

/* p_process
------------------------------------------------------------------------------------------------------------*/



#p_process {
 margin: 0 auto 4% auto;
 width: 92%;
}

#p_process h1 a {
 border-bottom: #F74B79 1px solid;
 background: url(../../common/img/bg_link.png) right center no-repeat #FFF;
 border-top: #F74B79 1px solid;
 color: #F74B79;
 font-size: 16px;
 display: block;
 height: 10%;
 margin-top: 1px;
 max-height: 50px;
 padding: 6px 10px;
 background-size: 30px 30px;
 -webkit-background-size: 30px 30px;
 -moz-background-size: 30px 30px;
 text-align: left;
}

/* p_showcase
------------------------------------------------------------------------------------------------------------*/


#p_showcase {
 margin: 0 auto 4% auto;
 width: 92%;
}

#p_showcase h1 a {
 border-bottom: #F74B79 1px solid;
 background: url(../../common/img/bg_link.png) right center no-repeat #FFF;
 border-top: #F74B79 1px solid;
 color: #F74B79;
 font-size: 16px;
 display: block;
 height: 10%;
 margin-top: 1px;
 max-height: 50px;
 padding: 6px 10px;
 text-align: left;
 background-size: 30px 30px;
 -webkit-background-size: 30px 30px;
 -moz-background-size: 30px 30px;
}

/* p_message
------------------------------------------------------------------------------------------------------------*/



#p_message {
 margin: 0 auto 4% auto;
 width: 92%;
}

#p_message h1 a {
 border-bottom: #F74B79 1px solid;
 background: url(../../common/img/bg_link.png) right center no-repeat #FFF;
 border-top: #F74B79 1px solid;
 color: #F74B79;
 font-size: 16px;
 display: block;
 height: 10%;
 margin-top: 1px;
 max-height: 50px;
 padding: 6px 10px;
 background-size: 30px 30px;
 -webkit-background-size: 30px 30px;
 -moz-background-size: 30px 30px;
 text-align: left;
}

/* p_information
------------------------------------------------------------------------------------------------------------*/


#p_information {
 margin: 0 auto;
 width: 92%;
}

#p_information .pagetop {
 background: #eb827c url(../../common/img/bt_next_white.png) right center no-repeat;
 color: #FFFFFF;
 font-size: 16px;
 padding: 8px 0;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 width: 100%;
 margin: 0 0 4% 0;
 background-size: 60px 30px;
 -webkit-background-size: 60px 30px;
 -moz-background-size: 60px 30px;
}

#p_information .bottom { width: 100%; }

#p_information .bottom ul {
 width: 100%;
 margin: 0 0 4% 0;
}

#p_information .bottom ul li {
 color: #FFFFFF;
 font-size: 16px;
 padding: 8px 0;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 width: 48%;
}

#p_information .bottom ul li.home {
 background: #eb827c url(../../common/img/bt_home.png) left center no-repeat;
 float: left;
 background-size: 40px 20px;
 -webkit-background-size: 40px 20px;
 -moz-background-size: 40px 20px;
}

#p_information .bottom ul li.top {
 background: #eb827c;
 float: right;
}

#p_information .bottom ul li span { vertical-align: middle; }

#p_information .bottom ul li img {
 margin: 0 3%;
 min-width: 15%;
 max-width: 15%;
 vertical-align: middle;
}

#p_information .information ul li {
 background-color: #eb827c;
 background-image: url(../img/bg_top.png);
 background-position: right center;
 background-size: 30px 30px;
 background-repeat: no-repeat;
 border-radius: 5px;
 display: block;
 margin: 0 0 4% 0;
 padding: 2% 0;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 width: 100%;
}

#p_information .information ul li.link {
 background-color: #aaa;
 background-image: none;
}

#p_information .information ul li.link img { width: 40%; }

#p_information .information ul li span {
 color: #FFF;
 font-size: 16px;
 text-align: center;
 vertical-align: middle;
}

/* スマートフォン */

body div#pcsmp {
 background-color: #fee;
 border: 1px solid #666666;
 color: #000;
 display: none;
 text-align: center;
 width: 100%;
 -webkit-text-size-adjust: none;
}

body div#pcsmp a {
 color: #333;
 display: block;
 font-family: "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku GothicPro", Osaka, Verdana, Helvetica, Arial, sans-serif;
 font-size: 380%;
 padding: 60px 0;
 width: 100%;
}

body.iphone div#pcsmp { display: block; }

body.android div#pcsmp { display: block; }

/* koyama*/


.viewport {
 width: 100%;
 overflow: hidden;
 margin: 0 auto;
 -webkit-transform: translateZ(0); /* Optional: When heavy at iOS6+ */
}

.flipsnap {
 width:10000px; /* 320px(item width) * 3(item count) */ }

.item {
 float: left;
 text-align: center;
 max-width: 240px;
 width:100%;
}

.item img { width: 100%; }


/**/

#p_work a.hd02 {
 border-bottom: #F74B79 1px solid;
 background-size: 30px 30px;
 background-color: #FFF;
 border-top: #F74B79 1px solid;
 color: #F74B79;
 font-size: 16px;
 font-weight: bold;
 display: block;
 margin-top: 1px;
 max-height: 50px;
 padding: 6px 10px;
 text-align: left;
}

.st-accordion {
 width: 100%;
 min-width: 270px;
 margin: 0 auto;
}

.st-accordion ul li.ac {
 border-bottom: 1px solid #c7deef;
 border-top: 1px solid #fff;
 overflow: hidden;
 height:10%!important;
}

.st-accordion ul li.ac > a {
 position: relative;
 outline: none;
 -webkit-transition: color 0.2s ease-in-out;
 -moz-transition: color 0.2s ease-in-out;
 -o-transition: color 0.2s ease-in-out;
 -ms-transition: color 0.2s ease-in-out;
 transition: color 0.2s ease-in-out;
}

.st-accordion ul li.ac > a:hover { color: #1693eb; }

.st-accordion ul li.ac > a span {
 position: absolute;
 top: 20%;
 right:0;
 background: url(../../common/img/bg_link.png) right center no-repeat;
 background-size: 30px 30px;
 -webkit-background-size: 30px 30px;
 -moz-background-size: 30px 30px;
 text-indent: -9000px;
 width: 30px;
 -webkit-transition: all 0.2s ease-in-out;
 -moz-transition: all 0.2s ease-in-out;
 -o-transition: all 0.2s ease-in-out;
 -ms-transition: all 0.2s ease-in-out;
 transition: all 0.2s ease-in-out;
 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 transform: rotate(90deg);
}

.st-accordion ul li.st-open > a span {
 -webkit-transform: rotate(270deg);
 -moz-transform: rotate(270deg);
 transform: rotate(270deg);
}

.st-content { padding: 5px 0px 30px 0px; }


.st-content img {
 width: 125px;
 border-right: 1px solid #fff;
 border-bottom: 1px solid #fff;
}
@media screen and (max-width: 320px) {

.st-accordion ul li > a { font-size: 36px; }
}