@charset "utf-8";

/*　コンテンツ全体
-----------------------------------*/
figure {position: relative}
figcaption {
    position: absolute;
    bottom: 0.3rem;
    left: 0.3rem;
    font-size: 10px;
    text-shadow: 0 0 3px #fff,0 0 3px #fff,0 0 4px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
}

#sec01 {background: url(../img/equipment/bg1.png);}
#sec02 {background: url(../img/equipment/bg2.png);}
#sec03 {background: url(../img/equipment/bg3.png);}
#sec04 {background: url(../img/equipment/bg4.png);}
#sec05 {background: url(../img/equipment/bg5.png);}

#sec01,#sec02,#sec03,#sec04,#sec05 {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    padding-bottom: 0;
    margin-bottom: 0;
}

@media screen and (max-width: 768px) {
.list{flex-wrap: wrap}    
}

.wrapper {max-width: 1200px!important}

/*　タイトル
-----------------------------------*/

@media screen and (max-width: 480px) {
.txt_s {font-size: 120%;}
.txt_m {font-size: 140%;}
}

.ttlbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0;
}

h2 {width: 30%;margin: 1rem}
.ttlbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0;
}

h3 {
    padding: 0 1rem;
    margin: 0 auto 2rem;
    height: auto;
    text-align: left;
}

@media screen and (max-width: 480px) {
.ttlbox {
    flex-wrap: wrap;
    justify-content: flex-start;
}
h2 {
    width: 50%;
    margin: 0 auto;
}
.ttlbox .maintxt {
    width: 100%;
}
h3 {
    text-align: center;
    width: 100%;
    margin: 0 auto 1rem;
}   
}

h3 {
    text-shadow: 0 0 6px #ccc;
    font-size: 3.1rem;
    line-height: 1.6;
    letter-spacing: .3rem;
    position: relative;
    width: 100%;
    display: flex;
    /*height: min(calc(10.5vw + 1rem),159px);*/
    justify-content: flex-start;
    align-items: baseline;
}

@media screen and (max-width: 768px) {
h3 {justify-content: center;} 
}

h3 figure {
    width: 100%;
    max-width: 1400px;
    position: absolute;
}
h4 {
    width: 100%;
    margin: 0 auto 3rem;
    font-size: 2.5rem;
    font-weight: 400;
    text-align: center;
}

h4 span {
    display: block;
    font-size: inherit;
    text-align: center;
}

h5 {
    position: relative;
    font-size: 150%;
    color: #fff;
    font-weight: 400;
    margin-bottom: 1.5rem;
    padding: .5rem 0;
}

h5 span {
    display: block;
    position: absolute;
    right: -0.4rem;
    bottom: 0rem;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: .2vw;
}

@media screen and (max-width: 768px) {
#sec03 h5,#sec04 h5,#sec05 h5 {
    text-align: center;
}    
}

#sec02 h5 {
    font-family: "conduit-m";
    font-size: 300%;
    color: #000;
    border-bottom: 2px solid #ccc;
    line-height: .2;
}

@media screen and (max-width: 480px) {
#sec02 h5 {
    line-height: .3;
    font-size: 250%;
}
}

#sec02 span {padding-bottom: 1.2rem;}

.cap {display: flex}
.cap span {
    display: inline-flex;
    justify-content: flex-start;
    padding: 0 1.5em 0 0;
    white-space: nowrap;
}
.cap span:first-child {padding: 0 1rem 0 0;}
.cap span img{
    padding:0 0 0 .4rem;
    width: 54%;
}

h6 {
    font-size: 1.75rem;
    color: #fff;
    font-weight: 100;
    margin: 0 auto;
    padding: .5rem;
    line-height: 2;
    text-align: center;
    background: #1fa492;
    letter-spacing: .1rem;
}

h7 {
    display: block;
    font-size: 1.5rem;
    color: #20a492;
    font-weight: 500;
    padding: 0;
    text-align: left;
}

h8 {
    display: block;
    font-size: 1.5rem;
    font-weight: 500;
    padding: 0;
    text-align: left;
}

h9 {
    width: 100%;
    font-size: 1.4rem;
    color: #1fa492;
    font-weight: 500;
    margin: 0 auto;
    padding: .5rem;
    background: #c2e6e2;
    line-height: 1.5;
    display: block;
    text-align: center;
}

h9 span {
    padding-top: 1.2rem!important;
    padding-bottom: 1rem;
    text-indent: 0;
    font-size: 90%!important;
    font-weight: 400;
    color: #000;
    background: #fff;
    line-height: 1.5;
}

@media screen and (max-width: 768px) {       
h4 {margin-top: 3rem}
#sec02 h4{margin: 5vw 0;}  
.cap {
    flex-wrap: wrap;
    justify-content: center;
}
    
.cap span {padding: .5rem 2rem .5rem 0;}
.cap span:first-child {padding: .5rem 1rem .5rem 0;}
    
.w_100 {max-width: 550px; margin: auto}    
} 

@media screen and (max-width: 480px) {
.main img {top: 22vw;}
    
h6 {
    font-size: 150%;
    line-height: 1.5;
    padding: 1rem .5rem;
}
h7 {font-size: 2.3rem;}
h9 {font-size: 2.3rem;}    
}

.sub_h01 {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto 1rem;
    background: #1fa492;
}

.sub_h01 p {
    width: 100%;
    padding: .5rem;
    color: #fff;
    font-size: min(5vw,1.8rem);
    font-weight: 500;
    letter-spacing: min( .2vw, .2rem);
    text-align: center;
}

@media screen and (max-width: 768px) {
.sub_h01 p { min-height:auto;}
}

@media screen and (max-width: 480px) {
.sub_h01 p {font-size:2.3rem;}
}

div.sub_h01 p span {font-size: inherit; text-align: center; display: block;}
div.sub_h01 p span span {font-size: 60%;}

div.sub_h01 > figure {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 1rem;
    margin: auto;
    width: 21%;
    height: fit-content;
}

div.sub_h01 > figure img {width: 100%}

@media screen and (min-width:480px) and (max-width:768px) {
div.sub_h01 {flex-wrap: wrap;}    
div.sub_h01 > span {
    display: block!important;
    width: 100%;
}
}

.ttl_h02 {
    text-align: center;
    font-size: 160%;
}

@media screen and (max-width: 768px) {
.ttl_h02 {
    font-size: 135%;
}  
}

.sub_h02 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 1rem auto;
    padding: .2rem 1rem;
    background: #bd9e5f;
    color: #fff;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium","Yu Gothic", Meiryo, "sans-serif";
    font-size: min(4vw,1.5rem);
    font-weight: 500;
    text-align: center;
}

/* テキストスタイル
-----------------------------------*/
dl {padding-top: .5rem;}
#sec02 dt, #sec04 dt {
    color: #000;
    border-bottom: 1px solid #999;
    padding: 0 0 .5rem;
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    /* align-items: flex-start; */
    justify-content: center;
    line-height: 1.2;
    text-align: center;
    margin-bottom: .5rem;
    flex-flow: column;
}

@media screen and (max-width: 768px) {
#sec02 dt, #sec04 dt {
    padding: .5rem 0;
    font-size: 2rem;
}  
}

dd{
    padding-top: .5rem;
    font-size: 120%;
}

.dl_style01 {padding: 0; margin-bottom: 0;}
.dl_style01 dt {border-bottom: none!important;}

.dl_style01 dt h8 {
    width: 100%;
    line-height: 2;
    align-items: center;
    display: flex;
    flex-flow: column;
    justify-content: center;
    font-size: 100%;
}

.dl_style02 {padding: 0; margin-bottom: 0;}
.dl_style02 dt {border-bottom: none!important;}

.dl_style02 dt h8 {
    min-height: 80px;
    width: 100%;
    line-height: 1.5;
    align-items: center;
    display: flex;
    flex-flow: column;
    justify-content: center;
    font-size: 100%;
}

#sec05 dt {
    border-bottom: 2px solid #efefef;
    padding: .5rem .5rem .3rem;
    font-size: 140%!important;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
   
#sec07 dt,.titlebox{
    color: #fff;
    background: linear-gradient(0deg, rgba(0,5,50,1) 0%, rgba(0,38,93,1) 100%);
    border-bottom:none;
    padding: .4rem;
    margin-bottom: .5rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.h4_txt {
    font-size: 1.5rem;
    margin: 0 0 2rem;
    letter-spacing: .2rem;
    line-height: 1.5;
    text-align: center;
}

h4 span {
    display: block;
    letter-spacing: .5rem;
    color: #999;
}

.col2 .cap,.col3 .cap,.col4 .cap {font-size: 1rem; text-align: left}

/* レイアウト
-----------------------------------*/

.pcz{display: block}
.spz{display: none}

.wrapper {
    margin: 0 auto 3rem;
}

.main_img {width: 100%; margin:1px auto 2rem}    
.col2,.col3,.col4,.col5,.col6 {flex-wrap: wrap; justify-content: space-between;}
.col3 {flex-wrap: wrap; justify-content: space-between;}
.col2 li{width: calc(50% - 1rem); margin-bottom: 1.5rem}
.col3 li{width: calc(33% - 1rem); margin-bottom: 1.5rem; padding: 1rem 1.5rem;}
.col3_x2{width: calc(33.5% * 2 - 1rem)!important;}
.col3_x3{width: 100%!important;}
.col4 li{width: calc(25% - 1rem); margin-bottom: 1.5rem}
.col4_x2{width: calc(50% - .6rem)!important; margin-bottom: 1.5rem}
.col4_x3{width: calc(25% * 3 -  .5rem)!important; margin-bottom: 1.5rem}
.list04 li{width: calc(50% - 3rem);}
.col5 li{width: calc(20% - 1rem); margin-bottom: 1.5rem}
.col6 li{width: calc(16% - .5rem); margin-bottom: 1.5rem}

.col2_s {max-width: none!important;margin-top: 1vw!important;}
.col2_s li:first-child{width: 80%}
.col2_s li:last-child{
    width: 20%;
    font-size: 120%;
    line-height: 1.5;
    font-weight: 400;
    padding: 1rem;
    text-align: justify;
    text-justify: inter-ideograph;
}

.col3_s li {
    width: calc(100%/3);
    display: flex;
    flex-flow: row-reverse;
}
.col3_s li figure {width: 60%; padding-right: 1rem;}
.col3_s li dl {width: 40%;}

@media screen and (max-width: 480px) {
.col3_s li figure {width: 48%;}
.col3_s li dl {width: 50%;} 
}

.col3_sp1 li {padding: 1rem;}
.col3_sp1 li:first-child {width: 47%;}
.col3_sp1 li:last-child {width: 21%;}

.col_mv {
    max-width: 450px;
    width: 33%!important;
}

.col_sp1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin: 1rem auto 2rem;
    max-width: 850px;
}

.col_sp1 > li:nth-of-type(1) {
    max-width: 450px;
    width: 56%;
}

.col_sp1 > li:nth-of-type(2) {
    width: 42%;
}

.col_sp1 > li:nth-of-type(2)  > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.col_sp1 > li:nth-of-type(2)  > ul > li{
    width: 49%;
}

.col_sp2_in {width: 63%!important;margin: 0 1.5%!important;}

#sec02 .col2 > li:last-child {width: 65%}

#sec02 .col3.sec_02-2,
#sec02 .col3.sec_02-3 {justify-content: center;}


#sec02 .col3.sec_02-2 dt,#sec02 .col3.sec_02-3 dt{line-height: 1.5;}
#sec02 .col3.sec_02-2 dt span,#sec02 .col3.sec_02-3 dt span{
    display: block;
    font-size: 80%;
}
#sec02 .col3.sec_02-2 li, #sec02 .col3.sec_02-3 li {
    display: flex;
    border: none;
    align-items: center;
}

#sec02 .col3.sec_02-2 li p {
    width: 60%;
    padding-right: 1rem;
}    
    
#sec02 .col3.sec_02-2 li dl {
    width: 40%;
}

#sec02 .col3.sec_02-3 li p {
    width: 55%;
    padding-right: 1rem;
}    
    
#sec02 .col3.sec_02-3 li dl {
    width: 45%;
}

#sec03 .col2 {margin-bottom: 0;}
#sec03 .col2 li {max-width: 500px; margin-bottom: 2.5rem;}
#sec03 figcaption {position: relative;font-size: 10px; line-height: 1.3;}

@media screen and (max-width: 768px) { 
.col2,.col3,.col4,.col5,.col6 {flex-wrap: wrap;}
.col2 li,.col3 li,.col4 li,.col5 li,.col6 li,.col3_x2 {width: 48%; margin-bottom: 3rem}
#sec02 .col2.sec_02-2 li {margin-bottom: 0}    
.col4_x2 {width:100%!important;max-width:450px;margin-left:auto;margin-right:auto;}
.col4_x3 {width:100%!important;max-width:450px;margin-left:auto;margin-right:auto;}
.col3_sp1 li:first-child,.col3_sp1 li:nth-child(2),.col3_sp1 li:last-child {width: 100%;}
.col3_sp1 li:last-child img {
    max-width: 200px;
    width: 60%;
    margin: auto;
}
  
.col3_s li p {
    width: 80%;
    margin: auto;
    max-width: 250px;
}    
}

@media screen and (max-width: 480px) {
.pcz{display: none}    
.spz{display: block}    
.col2,.col3,.col4,.col5 {flex-wrap: wrap;}
.col2 li,.col3 li,.col3_x2 {width: 100%!important;}
#sec02 .col2 > li:first-child,
#sec02 .col2 > li:last-child {width: 100%;}
#sec02 .col3.sec_02-2 li dl {width: 60%;}    
#sec04 .col4 li {width: 100%!important;}
#sec04 .col4 li img {
    max-width: 384px;
    margin: auto;
}    
    
.col6 li,.col4 li,.col5 li{width: calc(50% - 1rem);}
.col_mv {
    width: 100%!important;
    margin: 1rem auto 3rem;
}

.col_sp2_in {
    width: 96%!important;
    margin: 0 1.5%!important;
}    
.col_sp1 > li:nth-of-type(1), .col_sp1 > li:nth-of-type(2) {
    width: 100%!important;
    margin: 1rem auto 2rem;
}
}
.imgbox {margin: 0 auto 3vw;}

@media screen and (max-width: 768px) {
.imgbox {
    margin: 1rem auto 4vw;
}  
}

.box_shadow {
    box-shadow: 0 0 10px #999;
}

.spbox01 {
    border: 2px solid #ccc;
    padding: 1rem;
}

.spbox01 dt {text-align: center;}

@media screen and (max-width: 480px) {
.spbox01 {
    display: flex;
    width: 100%!important;
}
.spbox01 dl {
    width: 70%;
    padding: 0 1.5rem;
}    
    
}

#sec05 .col3 li {
    width: calc(33% - 1rem);
    margin-bottom: 1.5rem;
    padding: 1rem 1.5rem;
    border: 1px solid #cfcfcf;
}

/*　画像アイコン
-----------------------------------*/
.iconbox {position: relative;}

.iconbox p {
    display: block;
    position: absolute;
    max-width: 100px;
    margin: auto;
    top: -9%;
    left: -4%;
    width: 27%;
}

/*　ページ内リンクタブ　
------------------------------*/

.tab {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    margin: 1rem auto 2vw;
}

.tablist {
    list-style-type: none;
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
    background: rgb(219 233 231);
    font-size: 1.3rem;
    width: calc(100%/5 - .5rem);
    white-space: nowrap;
    margin: 3px;
    border-radius: 6px;
    border: 1px solid #8d8c8c;
    text-shadow: 0 0 4px #bfbfbf;
    box-shadow: 0 0 4px #d9d9d9;
    transition: .3s all;
}
/*.tablist:nth-child(3), .tablist:nth-child(4), .tablist:last-child {
    width: calc(100%/3 - .4rem);
}*/

.tablist.active,
.tablist:hover {
    background: #0e8b7a;
    color: #fff;
}

.tabcontents {
  margin-bottom: 4rem;
}

#TOP {
    margin-top: -300px;
    padding-top: 300px;
}


@media screen and (max-width: 768px) { 
.tablist,.tablist:nth-child(3),.tablist:nth-child(4) {
    padding: 2rem 0;
    width: calc(100%/2 - 1.5vw);
    margin: 1px;
}
.tablist {font-size: 1.8rem;}    
.tablist:last-child{width: calc(100% - 2.5vw)}    
    
}

.txt_s span {
    display: inline!important;
    font-size: 110%;
    font-weight: 600;
    color: #9d1d22;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium","Yu Gothic", Meiryo, "sans-serif";
}

@media screen and (max-width: 768px) {
.w_30 {width: 60%!important;}
.pl05 {padding-left: 0!important;}    
}