@charset "UTF-8";
/* ===================================================================
CSS information

 file name  :contents.css
 style info :各ページコンテンツ用
=================================================================== */



img {max-width:100%;height:auto;}



/* ===================================================================
画像
=================================================================== */
img{
max-width: 100%;
height: auto;
width /***/:auto;
vertical-align: bottom;
}
/* ===================================================================
box-sizing
=================================================================== */
*{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/* ===================================================================
ボタン
=================================================================== */
.btn{
	display: block;
	padding: 1em 0;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	cursor: pointer;
	text-align: center;
}
.btn-s{ font-size: 10px; }
.btn-m{ font-size: 14px; }
.btn-l{ font-size: 18px; }
.btn-submit{
	background-color: #486470;
	color: #fff;
}
.btn-fb{ background-color: #3b5998;}
.btn-tw{background-color: #0084b4;}
.btn-gg{background-color: #dd4b39;}
/* ===================================================================
form
=================================================================== */
input,
select{
	outline:none;
}
input,
textarea{	
}
input[type=text],
input[type=email],
textarea{
	border: solid 1px #ccc;
	font-size: 16px;
	line-height: 1.5em;
	padding: 0.4em;
}
input[type=submit]{
	border: none;
}
/* ===================================================================
マージン
=================================================================== */
.mb10{ margin-bottom:10px;}.mb20{ margin-bottom:20px;}
.mb30{ margin-bottom:30px;}.mb40{ margin-bottom:40px;}
.mb50{ margin-bottom:50px;}.mb60{ margin-bottom:60px;}
.mb70{ margin-bottom:70px;}.mb80{ margin-bottom:80px;}
.mb90{ margin-bottom:90px;}.mb100{ margin-bottom:100px;}
/* ===================================================================
クリアフィックス
=================================================================== */
.clear:after, .clear-left:after, .clear-right:after {display: block; content: "";}
.clear, .clear:after {clear: both;}
.clear-left, .clear-left:after {clear: left;}
.clear-right, .clear-right:after {clear: right;}
.clearfix:after {
	content: " ";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix { display: inline-block; }
/* \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* */


:root{
    --white:#ffffff;
    --main-gray:#1b1b1b;
    --sub-gray:#232323;
    --line-gray:#505050;
}

html,body{
    background-color: var(--main-gray);
    color: var(--white);
    font-family: "acumin-pro", "Noto Sans JP", sans-serif;
    line-height: 1.8em;
}


.en{
    font-family: "acumin-pro", sans-serif;
    font-weight: 700;
    font-style: normal;
}
.mt-m{margin: min(60px,5%) 0;}
.mtb-m{margin: min(60px,5%) 0;}
.mb-m{margin: 0  0 min(100px,5%);}
.ptb-m{padding: min(60px,5%) 0;}
.mt-nega{margin-top: -100px;}
.btn{
    display: block;
    background-size: 180% auto;
    border-radius: 8px;
    transition: all .3s ease-out;
    color: #fff;
    position: relative;
    letter-spacing: 0;
    line-height: 1;
    padding: 1.4em 0;
    text-align: center;
}
.btn:hover {background-position: right center;}
.btn-orange{background-image:linear-gradient(45deg,#c79f33,#b55b00);}
.arrow {
  display: inline-block;
  width: 20px;
  height: 8px;
  background: #fff;
  clip-path: polygon(0 43.8%, 65.4% 43.8%, 65.4% 0, 100% 50%, 65.4% 100%, 65.4% 56.3%, 0 56.3%);
}
.btn .arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px
}
@media (min-width: 960px) {/*PC*/
     .show-sp{
        display: none;
     }
}
@media (max-width: 959px) {/*SP*/
     .show-pc{
        display: none;
     }
     .btn{
        font-size: .8em;
     }
     .mt-nega{margin-top: 0;}
}


/* ===================================================================
common
=================================================================== */

.header{position: fixed;}
.logo-header{padding: 40px 0 0 40px ;}
.cont-primary{
    width: min(1200px,90%);
    margin: 0 auto;
}
.cont-secondary{
    width: min(1340px,90%);
    margin: 0 auto;  
}
.cont-ttl{margin: 0 0 4em ;}
.cont-ttl h2{
    color: #C79F33;
    margin-bottom: .3em;
    font-size: 100px;
   line-height: 1em;
}
.ttl-jp-main{
    display: inline-block;
    font-size: 1.6em;
    position: relative;
    padding-left: 1.5em;
    line-height: 1em;
}
.ttl-jp-main:before{
    content: "";
    display: inline-block;
    width: 1em;
    position: absolute;
    border-bottom: solid 1px var(--white);
    left: 0;
    top: 50%;
}
.ttl-jp-sub{
    display: inline-block;
    margin-left: 2em;
}
@media (max-width: 959px) {/*SP*/
    .logo-header{
        padding: 10% 0 0 10%;
        width: 35vw;
    }
    .cont-ttl{
        margin: 0 0 2em;
    }
    .cont-ttl h2{
         font-size: 48px;
    }
    .ttl-jp-main{
        font-size: 1.2em;
        margin-bottom: 1em;
    }
    .ttl-jp-sub{
        display: block;
        margin-left: auto;
    }
}


/* ===================================================================

各セクション

=================================================================== */

.bg-advantage{
    background: url(../images/involuteholds/bg_products.png) no-repeat;
    background-position: bottom right -100px;
    padding-bottom: 200px;
    background-size: min(70vw,963px);
}
.cont-advantage{
    overflow: hidden;
    position: relative;
    padding: min(70px,5%);
    background: url(../images/involuteholds/bg_advantage.png) center bottom no-repeat var(--sub-gray);
    background-size: 100%;
}
.advantage-ttl{
    font-size: 2em;
    font-weight: bold;
    line-height: 1.6em;
    margin-bottom: 1em;
}
.advantage-list dl dt{
    font-size: 1.2em;
    margin-bottom: .6em;
}
.advantage-list-img{
    margin-bottom: 1em;
}
@media (min-width: 960px) {/*PC*/
     .advantage-list{
        display: flex;
        justify-content: space-between;
     }
      .advantage-list li{
        width: min(373px,32%);
      }
}
@media (max-width: 959px) {/*SP*/
    .bg-advantage{
        background-position: bottom right -40px;
        padding-bottom: 17%;
    }
    .advantage-ttl{
        font-size: 1.2em;
    }
    .advantage-list li{
        margin-bottom: 3em;
    }
}


/* ===================================================================
MV
=================================================================== */
.section-mv{
    background: url(../images/involuteholds/bg_mv.png) center left no-repeat;
    background-size: cover;
}
.cont-mv{padding: min(160px,14%) 0 min(40px,5%);}
.ttl_catch{
    text-align: center;
    font-size: min(5vw,3em);
    font-weight: bold;
    line-height: 160%;
    margin-bottom: 1em;
}
.ttl_catch span{color: #C79F33;}
.eyecatch{text-align: center;}
.mv_btns{text-align: center;}
.mv_btns li{
    display: inline-block;
    width: min(240px,46%);
    margin: 0 .5% 3% .5%;
}
@media (max-width: 959px) {/*SP*/
     .eyecatch{
        width: 50vw;
        margin: 0 auto;
     }
}
@media (max-width: 389px) {/*SP*/
     .mv_btns li{
        width: 80vw;
        display: block;
        margin: 0 auto 1em;
     }
}

/* ===================================================================
CTA
=================================================================== */
.cta{
    position: relative;
    overflow: hidden;
    border: solid 1px var(--line-gray);
    border-radius: 16px;
}
.cta:after{
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
background: url(../images/involuteholds/bg_cta.png) no-repeat center center;
background-size: cover;
transition: all .3s ease-out;
}
.cta:hover:after {
opacity: .8;
transform: scale(1.1);
}
.cta-link{
    position: relative;
    z-index: 1;
}
.ttl-cta{
    font-size: min(4em,8vw);
    line-height: 1em;
    margin-bottom: .2em;
}
.ttl-cta-sub{
    display: block;
    font-size: .5em;
}
.cta-arrow{
    position: absolute;
    right: 10%;
    z-index: 2;
    background-image:linear-gradient(45deg,#c79f33,#b55b00);
    border-radius: 8px;
}
.cta-arrow .arrow{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%)translateX(-50%);
}
@media (min-width: 960px) {/*PC*/
     .cta{
        height: 380px;
     }
     .cta-link{
        width: 80%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    .cta-arrow{
        top: 50%;
        transform: translateY(-50%);
        width: 80px;
        height: 80px;
    }
}
@media (max-width: 959px) {/*SP*/
      .cta-link{
        padding: 10%;
        display: block;
      }
      .cta-arrow{
        width: 40px;
        height: 40px;
        bottom: 10%;
      }
}
/* ===================================================================
moyamoya
=================================================================== */
.section-moyamoya{
    background: url(../images/involuteholds/bg_moyamoya.png) top center no-repeat;
    background-size: min(120%,1440px);
    padding: 5% 0;
}
.ttl-moya{
    text-align: center;
    font-size: 2.6em;
    line-height: 1.6em;
    font-weight: bold;
    margin-bottom: 1em;
}

@media (min-width: 960px) {/*PC*/
     .cont-moya{
        display: flex;
        justify-content: center;
     }
     .pic_moya_comment{
        margin-right: 2em;
     }
}
@media (max-width: 959px) {/*SP*/
    .ttl-moya{
        font-size: 1.4em;
    }
     .cont-moya div{
        text-align: center;
     }
     .pic_moya_illust{
        width:50%;
        margin: 0 auto;
     }
}


/* ===================================================================
Products
=================================================================== */




.products-list{
    margin-bottom: 60px;
}
.products-list li{
    background: url(../images/involuteholds/bg_products_item.png) center center no-repeat;
    background-size: cover;
}
.item-products{
    padding: 5% 10%;
    margin-bottom: 1em;
}

.products-img{
    margin-bottom: 1em;
    text-align: center;
}
.products-body dt{ 
    font-size: 1.2em;
    margin-bottom: .5em;
}
.products-hold{
    border-top: solid 1px var(--line-gray);
    padding: 8% 8% 0 8%; 
}
.products-hold-body{margin-bottom: 20px;}
.products-hold-body h4{
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: .5em;
}

@media (min-width: 960px) {/*PC*/
     .products-list{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
     }
     .products-list li{
        width: 48%;
        height: 560px;
     }
     .products-list li:nth-child(even){
        margin-top: 5%;
     }
     .products-hold{
        display: flex;
        justify-content: space-between;
     }
     .products-hold-body,
     .roducts-hold-img{
        width: 48%;
     }

}
@media (max-width: 959px) {/*SP*/
     .products-img{
        width: 40vw;
        margin: 0 auto;
     }
}

/* ===================================================================
Case Study
=================================================================== */


.section-case{
    margin-top: -100px;
}
.case-list figure{
    margin-bottom: 1em;
}
@media (min-width: 960px) {/*PC*/
    .swiper-wrapper{
        display: flex;
        justify-content: space-between !important;
    }
    .swiper-slide{
        flex-shrink:inherit !important;
        width: 32% !important;
    }
     .swiper-slide:nth-child(2){
        margin-top: 60px;
     }
}

.bg-case{
    background: url(../images/involuteholds/bg_case.png) no-repeat;
    background-position: bottom right -100px;
    padding-bottom: 200px;
    background-size: min(60vw,559px);
}
@media (max-width: 959px) {/*SP*/
    .section-case{
       margin-top: -40px;
    }
    .bg-case{
        padding-bottom: 25%;
    }
     
}

/* ===================================================================
Achievements
=================================================================== */
.bg-achivements{
    background: url(../images/involuteholds/bg_spec.png) no-repeat;
    background-position: bottom right -100px;
    padding-bottom: 240px;
    background-size: min(60vw,559px);
}
.cont-achivements{
    background-color: #232323;
    padding:min(70px,5%);
}
.achivement-body p{margin-bottom: 1.8em;}
.block-achivement{margin-bottom: min(80px,5%);}
.block-achivement-event{
    border: solid 1px #505050;
    padding: min(70px,8%);
}
.achivement-event-img{
    width: min(180px,36%);
    margin-right: 1em;
}
.achivement-event-body{
    flex:1;
    line-height: 1.6em;
}
.achivement-event-body dt{font-size: 1.2em;}
.achivement-event-body dd{font-size: .8em;}

@media (min-width: 960px) {/*PC*/
     .block-achivement{
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
     }
     .achivement-body{width: 42%;}
     .achivement-img{width: 52%;}
     .block-achivement-event{
        display: flex;
        justify-content: space-between;
     }
     .block-achivement-event li{
        width: 48%;
        display: flex;
        justify-content: space-between;
    }
}
@media (max-width: 959px) {/*SP*/
    .bg-achivements{
        background-position: bottom right -40px;
        padding-bottom: 22%;
    }
    .block-achivement-event li{margin-bottom: 5%;}
    .achivement-img{margin-bottom: 5%;}
     .achivement-event-img{
        width: 100%;
        text-align: center;
        margin-bottom: 1em;
     }
      .achivement-event-img img{width: 50%;}
      .block-achivement-event li:nth-child(1){
        border-bottom: solid 1px var(--line-gray);
        padding-bottom: 2em;
        margin-bottom: 2em;
      }
}


/* ===================================================================
SPEC
=================================================================== */
.section-spec{
    margin-top: -140px;
}
.block-spec-list{}
.spec-list{
    margin-bottom: 2em;
}
.spec-list li{
    padding: .8em;
    font-size: .9em;
}
.spec-list li:nth-child(odd){
    background-color: var(--sub-gray);
}
.spec-list-sumbnail{
    margin-bottom: 1em;
}

@media (min-width: 960px) {/*PC*/
     .cont-spec-list{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
     }
     .block-spec-list{
        width: 48%;
     }
     .spec-list li{
        display: flex;
        justify-content: space-between;
     }
     
}
@media (max-width: 959px) {/*SP*/
    .section-spec{
        margin-top: -40px;
    }
     .spec-list li span{
        display: block;
     }
}


/* ===================================================================
Color Lineup
=================================================================== */
.section-color{
    background: url(../images/involuteholds/bg_color.png) bottom center no-repeat;
    background-size: cover;
}
.color-body p{
    margin-bottom: 1.6em;
}
.color-body h4{
    font-weight: bold;
    font-size: 1.2em;
}
.color-list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2em;
}
.color-list li{
    width:min(160px,33%);
    margin-bottom: 1em;
}
.icon-color{
    margin-right: .6em;
    display: inline-block;
    vertical-align: middle;
}
.unit-btn{
    width: 270px;
    margin-left: auto;
}

@media (min-width: 960px) {/*PC*/
    .block-color{
        display: flex;
        justify-content: space-between;
    }
    .color-body{
        width: 36%;
    }
    .cont-color-list{
        width: 60%;
    }
    
}
@media (max-width: 959px) {/*SP*/
    .color-list li{
        font-size: .7em;
    }
     .icon-color{
        width: 28px;
    }
    .unit-btn{
    margin:0 auto;
}
}


/* ===================================================================
FAQ
=================================================================== */

.cont-faq-list{
    width: min(994px,90%);
    margin: 0 auto;
}

.cont-faq-list ul li{
    border-bottom: solid 1px var(--line-gray);
    padding: 2em 0;
}
.cont-faq-list ul li:first-child{
    padding-top: 0;
}

.faq-list{
    display: flex;
     margin-bottom: 1em;
}

.faq-list a{
    color: #C79F33;
    text-decoration: underline;
}

.icon-qa{
    font-size: 1.4em;
    font-weight: 100;
    display: block;
    border:solid 1px var(--line-gray);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    margin-right: 1em;
   

}
.faq-list-body{
    flex: 1;
    padding-top: 1.6em;
}
.faq-list-q{
    font-size: 1.2em;
}
@media (max-width: 959px) {/*SP*/
     .icon-qa{
        font-size: .8em;
        width: 30px;
        height: 30px;
        line-height: 30px;
     }
     .faq-list-body{
        padding-top: inherit;
        font-size: 1.2em;
     }
}




/* ===================================================================
message
=================================================================== */
.section-message{
    background-color: #232323;
    padding: min(100px,5%) 0;
}
.cont-message{
    margin-bottom: min(100px,5%);
}


.message-body p{
    margin-bottom: 1.5em;
    line-height: 2em;
}
.message-body .name{
    font-size: 1.2em;
}
@media (min-width: 960px) {/*PC*/
     .block-message{
        display: flex;
        justify-content: space-between;
     }
     .message-body{
        width: 48%;
     }
     .message-photo{
        width: 45%;
     }
}

@media (max-width: 959px) {/*SP*/
     .cont-message{
        padding: 40px 0;
     }
      .message-photo{
        padding: 0 5%;
      }
}


/* ===================================================================
footer
=================================================================== */


.footer-inner{
    padding: min(8%,80px) 0;
}
.footer-address h5{
    margin-bottom: .5em;
}
.footer-address p{
    font-size: .8em;
    line-height: 1.6em;
}
.footer-logo{
    width: min(130px,25%);
}
.copyright{
    font-size: .8em ;
}
@media (min-width: 960px) {/*PC*/
    .footer-inner{
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
     .footer-info{
        display: flex;
    }
    .footer-logo{
        margin-right: 2em;
    }
}
@media (max-width: 959px) {/*SP*/
     .footer-logo{
        margin-bottom: 1.6em;
     }
     .copyright{
        text-align: center;
     }
     .footer-info{
        margin-bottom: 2em;
     }
}