@charset "utf-8";

/*------------------調整---------------------*/
html body{background-color: transparent;}        
h5.dxv,#Header,#Globalnavi,.leadSection.clearfix,.p-registered {display: none;}/*footer*/
.column2R #main,#main,#container #main,#container,#contents {
    float: none;
    width: auto;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
.clearfix:before {
    content: "";
	display: block;
	clear: both;
}
.clearfix {
	display: block;
}
.clearfix:after, #nav1:after, #nav2:after, #nav3:after, #container:after, #contents:after, #footerNav:after {
    content: "";
}
#container {
    margin: 0 auto ;
    font-size: 0;/*隙間*/
    vertical-align: bottom;/*隙間*/
}
.l-footer {
    max-width: 100%; 
}


/*-------------------------------------
　ページ基本設定 FONT
---------------------------------------*/
        #container #main {
             background-color:#FFF;
             color: #484848;/*#000721*/
             font-family:"Roboto", 'Noto Sans JP', sans-serif;
             font-size: 17px;/*p,dl dd dt,table*/
             font-feature-settings: 'palt';/*文字間*/
             -webkit-font-feature-settings: "palt";
             -moz-font-feature-settings: "palt";
             letter-spacing: .1rem;
             line-height: 2;
             text-align: center;/*全体センター合わせ*/
             word-break:break-word;
}
        #container #main h1,#container #main h2,#container #main h3,#container #main h4,#container #main h5,#container #main h6{
            font-weight: bold;
            line-height: 1.5;
        }  
        #container #main h1{
        }  
        #container #main h2{
        }        
        #container #main h3{  
            font-size: 36px;
        }
        #container #main h4{
            font-size: 30px;
        }
        #container #main h5{
        }
        #container #main h6{
        }
        #container #main p{
            font-size: 17px;
        }        
        #container #main p.txt_s{
        }
        #container #main p.txt_l{
        }
        #container #main p.txt_note{
            font-size: 16.5px;
            line-height: 2rem;
            text-indent: -1rem;
            padding-left: 1rem;
        }
        #container #main a,#container #main a span {
            color: #fff;
            text-decoration: underline;
        }
        #container #main a:hover,#container #main a span:hover {
            opacity: .7;
        }
        #container #main a.button:hover {
            opacity: 1;
        }

@media screen and (max-width:479px){
        #container #main {
            font-size: 14px;
        }
        #container #main h1{
        }  
        #container #main h2{
        }        
        #container #main h3{
            font-size: 24px;
        }
        #container #main h4{
            font-size: 16px;
        }
        #container #main h5{
        }
        #container #main h6{
        }
        #container #main p{
            font-size: 14px;
            line-height: 2.3;
        }
        #container #main p.txt_s{
        }
        #container #main p.txt_l{
        }
        #container #main p.txt_note{
            font-size: 11px;
            line-height: 1.3rem;
        }
    
} 


/*-------------------------------------
　ボタン
---------------------------------------*/
#container #main .button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
    display: inline-block;
    border-radius: 0;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    height: 50px !important;/*高さセンター揃*/
    position: relative;
    overflow: hidden !important;
    max-width: 215px;
    width: 100%;
    z-index: 16777271;
    font-family: 'Noto Sans JP', sans-serif;
    font-feature-settings: 'palt';
    font-size: 16px !important;
    letter-spacing: .1rem;
    padding-right: 1rem;
    padding-left: 1rem;
}

/*****カート、リンクアイコン******/
#container #main .button p{
    display: inline-block;
    position: relative;
    font-size: 16px !important;
    text-align: center;
    line-height: 50px !important;/*高さセンター揃*/
    padding-right: 1rem;
    width: 100%;
}

/*アイコンなし*/
#container #main .button p.no_btn {
    padding-right: 0; 
}
/*カートアイコン*/
#container #main p.pl_btn::after {
    position: absolute;
    top: calc(50% - 3px);
    right: 0;
    width: 8px;
    height: 8px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-right: 2px solid;
    border-bottom: 2px solid;
    content: '';
}
/*リンクアイコン*/
#container #main p.l_btn::after {
    position: absolute;
    top:1px;
    right: 0;
    width: 20px;
    /*content: url("http://www.dospara.co.jp/5info/img/kakakucom_award2022_re/ico_link.svg") ;*/
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17.004' height='14.023' viewBox='0 0 17.004 14.023'><g id='グループ_95' data-name='グループ 95' transform='translate(0.5)'><g id='長方形_8' data-name='長方形 8' transform='translate(3.504)' fill='none' stroke='%23fff' stroke-width='1'><rect width='13' height='10' stroke='none'/><rect x='0.5' y='0.5' width='12' height='9' fill='none'/></g><path id='パス_82' data-name='パス 82' d='M3.683,4h-3.8v8.928H11.935V9.251' transform='translate(0.118 0.595)' fill='none' stroke='%23fff' stroke-width='1'/></g></svg>") ;/*線　stroke='%23fff'*//*塗　fill='none'*/
}
#container #main p.l_btn2::after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -3rem;
    width: 30px;
    height: 33px;
    margin: auto;
    /*content: url("http://www.dospara.co.jp/5info/img/kakakucom_award2022_re/ico_link.svg") ;*/
    content: url("data:image/svg+xml;utf8,<svg version='1.1' id='layer' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32.3 35.4' style='enable-background:new 0 0 32.3 35.4;' xml:space='preserve'><style type='text/css'>.st0{fill:none;stroke:%23FFFFFF;stroke-miterlimit:10;}</style><rect id='path2' x='10.4' y='0.5' class='st0' width='21.4' height='24.6'/><path id='path1' class='st0' d='M10.4,10.4H0.5v24.6h21.4v-9.9'/></svg>") ;/*線　stroke='%23fff'*//*塗　fill='none'*/
}

/*ボタンSP*/
@media (max-width: 479px) {
#container #main .button {
    height: 50px !important;/*高さセンター揃*/
    font-size: 17px !important;
    width: 100%;
    max-width: none;
}    
#container #main .button p{
    font-size: 17px !important;
    line-height: 50px !important;/*高さセンター揃*/
}    
#container #main p.pl_btn::after {
    border-right: 1px solid;
    border-bottom: 1px solid;
    top: calc(50% - 4px);
}
#container #main p.l_btn::after {
    top:1px;
}
#container #main p.l_btn2::after {
    top: unset;
    bottom: -2.5rem;
    right: 0;
    left: 0;
    margin: auto;
    width: 20px;
    height: 22px;
    }    
#container #main .button p.no_btn {
}    
    
}


/******配色******/
#container #main a.button.btnBLE {
    border: 1px solid #a3a3a3 !important;
    background-color: #004da1 !important;
    color: #fff !important;
    /*width: 330px;指定するとき*/
}
#container #main a.button.btnRED {
    background-color: #FF0000 !important;
    color: #fff !important;
    /*width: 330px;指定するとき*/
}
#container #main a.button.btnSKY {
    border: 1px solid #a3a3a3 !important;
    background-color: #00a2e6 !important;
    color: #fff !important;
    /*width: 330px;指定するとき*/
}
#container #main a.button.btnBK {
    border: 1px solid #a3a3a3 !important;
    background-color: #484848 !important;
    color: #fff !important;
    /*width: 330px;指定するとき*/
}
#container #main a.button.btnGRY {
    border: 1px solid #ececec !important;
    background-color: #ececec !important;
    color: #484848 !important;
    pointer-events: none;
    /*width: 330px;指定するとき*/
}
#container #main a.button.btnWH {
    border: 1px solid #a3a3a3 !important;
    background-color: #ffffff !important;
    color: #004da1 !important;
    /*width: 280px;指定するとき*/
}

#container #main a.button.btnWH_flm {
    border: 1px solid #ffffff !important;
    background-color: transparent !important;
    color: #ffffff !important;
    /*width: 280px;指定するとき*/
}
#container #main a.button.btnBLE_flm {
    border: 1px solid #004da1 !important;
    background-color: #ffffff !important;
    color: #004da1 !important;
    /*width: 280px;指定するとき*/
}
#container #main a.button.btnSKY_flm {
    border: 1px solid #00a2e6 !important;
    background-color: #ffffff !important;
    color: #00a2e6 !important;
    /*width: 280px;指定するとき*/
}
#container #main a.button.btnBK_flm{
    border: 1px solid #484848 !important;
    background-color: transparent !important;
    color: #484848 !important;
    /*width: 280px;指定するとき*/
}
#container #main a.button.btnALT {
    border: none !important;/*1px solid #00C0C7 !important*/
    background-color: #333 !important;
    color: #00C0C7 !important;
    box-shadow: 3px 4px 0px #00f6ff;
    width: auto ;/*指定するとき*/
    font-weight: 700;
    margin-top: 1.5rem;
}
#container #main a.button.btnALT:hover {
	bottom: -3px;
	box-shadow: 0px 0px 0px #00f6ff;
}

/*-------------------------------------
　hover(js背景が流れる)PCのみ
-------------------------------------*/
@media screen and (min-width:480px){
    
/*== 背景が流れる（斜め）白 */
#container #main .btnBLE.button::before,#container #main .btnSKY.button::before,
#container #main .btnBK.button::before,#container #main .btnWH_flm.button::before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: -135%;
    /*色や形状*/
  background:#ffffff;
  opacity: 0.1;
  width:125%;
  height: 100%;
  transform: skewX(-25deg);
}
    
/*== 背景が流れる（斜め）グレー */
#container #main .btnBK_flm.button::before,#container #main .btnRED.button::before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: -135%;
    /*色や形状*/
  background:#000721;
  opacity: 0.1;
  width:125%;
  height: 100%;
  transform: skewX(-25deg);
}
    
/*== 背景が流れる（斜め）青 */
#container #main .btnBLE_flm.button::before {
  content: '';
  position: absolute;
    /*絶対配置で位置を指定*/
  top: 0;
  left: -135%;
    /*色や形状*/
  background:#004da1;
  opacity: 0.1;
  width:125%;
  height: 100%;
  transform: skewX(-25deg);
}
   
/*== 背景が流れる（斜め）水色 */
#container #main .btnSKY_flm.button::before,#container #main .btnWH.button::before {
  content: '';
  position: absolute;
    /*絶対配置で位置を指定*/
  top: 0;
  left: -135%;
    /*色や形状*/
  background:#00a2e6;
  opacity: 0.1;
  width:125%;
  height: 100%;
  transform: skewX(-25deg);
}    
    
}  
    
/*js右から左に流れるボタン*/
#container #main .link--over::before {
	animation: link-over ease-out .4s both;
}
#container #main .link--out::before {
	animation: link-out ease-in .4s both;
}
@keyframes link-over {
	0% {
		left: -168%;
	}
	100% {
		left: -18%;
	}
}
@keyframes link-out {
	0% {
		left: -18%;
	}
	100% {
		left: 168%;
	}
}

@keyframes hover-flash {
	0% {
		opacity: .3;
	}
	100% {
		opacity: .85;
	}
}


/*.rltvBTNboxボタン位置position使用*/
#container #main .rltvBTNbox {
    position: relative;
}
#container #main .rltvBTNbox a.button {
    position: absolute;
    top: 50%;
    right: 0px;
}

/*SSサイズ*/
#container #main .btn_s-small a.button{
  transform: scale(.80);
}

/*Sサイズ*/
#container #main .btn_small a.button{
  transform: scale(.90);
}


/*ボタン上書き*/    
#container #main .btn2023.button {
    border-radius: 5px;
    height: 65px !important;/*高さセンター揃*/
    border: none !important;
    background: transparent linear-gradient(90deg, #50A1F2 0%, #83D9CE 100%) 0% 0% no-repeat padding-box;
    color: #FFF !important;  
}         
#container #main .btn2023.button p.plarw_btn{
    line-height: 65px !important;/*高さセンター揃*/
    font-size: 22px !important;
    white-space: nowrap;
    padding-left: 2.5rem;
    padding-right: 5rem;
}
#container #main a.button.btn2023:hover {
    opacity: .8;
}

/*リンクアイコン*/
#container #main p.plarw_btn::after {
    content: "" ;
    position: absolute;
    top: calc(50% - 4px);
    right: 40px;
    width: 30px;
    height: 8px;
    border-bottom: 2px solid #fff;
}
#container #main p.plarw_btn span::after {
    content: "" ;
    position: absolute;
    top: calc(50% - 4px);
    right: 42px;
    width: 30px;
    height: 8px;
    border-right: 3px solid #fff;
    transform: skew(45deg);
}
    
@media screen and (max-width:479px){
#container #main .btn2023.button {
    height: 50px !important;/*高さセンター揃*/
    margin-top: 30px;
} 
#container #main .btn2023.button p.plarw_btn{
    line-height: 50px !important;/*高さセンター揃*/
    padding-left: 1rem;
    padding-right: 2.5rem;
}    
#container #main .btn2023.button p.plarw_btn {
    font-size: 15px !important;
} 
/*リンクアイコン*/
#container #main p.plarw_btn::after {
    content: "" ;
    position: absolute;
    top: calc(50% - 2.5px);
    right: 13px;
    width: 20px;
    height: 5px;
    border-bottom: 2px solid #fff;
}
#container #main p.plarw_btn span::after {
    content: "" ;
    position: absolute;
    top: calc(50% - 2.5px);
    right: 14px;
    width: 20px;
    height: 5px;
    border-right: 3px solid #fff;
    transform: skew(45deg);
}    
}


/*汎用*/
#container {
  width: 100%;
}
.inner{
    max-width:  1050px;
    width: 82%;
    margin: 0 auto;
} 
.txtL{
    text-align: left !important;
}
.txtR{
    text-align: right !important;
}
.txtC{
    text-align: center !important;
}
.txtRED{
        color: #fa8928;
    }   
.txtYLW{
        color: yellow;
    }
.txtWH{
        color: white;
    }
.txtGRY{
        color: #484848;
    }
.txtBLE{
        color: #004da1;
    }
.txtSKY{
        color: #00a2e6;
    }
.linkUl{
        color: #004da1 !important;/*#00a2e6*/
        text-decoration: underline !important;
    }  
.txtNwrp{
        white-space: nowrap;
}

.br25{
    margin-left: 25%;
    margin-right: 25%;
}
.br25L{
    margin-left: 25%;
}
.br25R{
    margin-right: 25%;
}
@media screen and (max-width:479px){    
.br25,.br25L,.br25R{
    margin-left: 0%;
    margin-right: 0%;
}  
}  


/*画像センター合わせ (+親要素にtext-align: center;)*/
#container #main img.lpImg{
    display: inline-block;
    margin: 0 auto;
    text-align: center !important;
    margin-inline: auto;
    max-width: 100% !important;
}

@media screen and (max-width:479px){ 
#container #main img.lpImg{
    width: auto;
}   
}

/*子要素を画面いっぱいに*/
.vw100 {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    /*padding: 0 calc(50vw - 50%);*//*元に戻す*/
}
@media screen and (max-width: 800px){
.vw100 {
    margin: 0 auto;
    width: 100%;
    }
    }

/*Youtube*/
.YTwrap{
    width: 800px;
    margin: 0 auto;
}      
iframe.YT {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  margin: 1rem auto;    
}
@media screen and (max-width:889px){ /*800/0.9*/
.YTwrap{
    width: auto;
} 
}


/*column*/ /*:not(.flx)*/
.flx-box{text-align: center !important;display: flex !important;justify-content: center;flex-wrap: wrap;gap: 0;box-sizing: border-box;}
.itembox{text-align: left;display: inline-block;vertical-align: top;}

.flx-box.no-wrap {justify-content: space-between;flex-wrap: nowrap;}
.flx-box.no-wrap .itembox,.flx-box.no-wrap .ley-box{ width: 100%;} 

.inrbox{display: inline-block;vertical-align: top;margin: 0 auto;}
.imgbox{vertical-align: middle;height: auto;}
.imgbox,.txtbox{display: table-cell;}
.up-dn .imgbox,.up-dn .txtbox{display: block;}
.imgbox{max-width: 430px;margin-inline: auto;}
.imgbox img{/*max-width:100% !important;*/}
.txtbox{width: 100%;}
.specbox{/*margin-top: 1rem;*/}
.up-dn .imgbox,.up-dn .txtbox{text-align: center;}

.itembox.up-dn { display: flex; flex-direction: column;text-align: center;}/*price-box位置調整用*/
.price-box { margin-block-start: auto;}/*位置調整*/

.txtbox,.clmLR .txtbox{padding-left: 100px;}
.up-dn .txtbox{padding-left: 0px;}
.cl-R .txtbox{padding-left: 0px !important;padding-right: 100px;order: -1;}

.txtbox{text-align: left;}
/*100/n - x*(n-1)/n  x=gap=3% n=column*/
.clm-1{width: 100%;}
.clm-2{width:calc(100%/2 - .05rem);}/*48.5%=50-x1/2*/
.clm-3{width:calc(100%/3 - .1rem);}/*31.33%=33.33-x2/3*/
.clm-4{width:calc(100%/4 - .15rem);}/*22.75%=25-x3/4*/
.clm-5{width:calc(100%/5 - .2rem);}/*17.6%=20-x4/5*/
.clm-6{width:calc(100%/6 - .25rem);}/*14.16%;=16.666-x5/6*/
.clm-7{width:calc(100%/7 - .3rem);}/*11.71=14.285-x6/7*/
.clm-8{width:calc(100%/8 - .35rem);}/*9.875=12.5-x7/8*/
.clm-9{width:calc(100%/9 - .4rem);}/*8.44=11.111-x8/9*/
.clm-10{width:calc(100%/10 - 4.5rem);}/*7.3=10-x9/10*/
.clm-a{min-width:113px;width:10vw;}
.clm-b{width: 170px;}
.clm-c{width: clamp(228px, 20vw, 350px);}
.clm-at{width: auto;}

/*.flx*/
.flx{
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.cl-R.flx > .txtbox{order: -1;}

.font0{font-size: 0;}

    
@media screen and (max-width:1200px){

.flx-box .itembox,.txtbox,.txtbox .txtR,.txtbox .txtL,.cl-R.flx .txtbox .txtL{text-align: center !important;} 
.clmLR .txtbox .txtR{text-align: right!important;}  
.clmLR .txtbox .txtL{text-align: left!important;}  
    
.flx-box.no-wrap {flex-wrap: wrap;}

.clmLR .txtbox,.clmLR .txtbox {text-align: left !important;} 
.flx-box .cl-R .txtbox{order: 0;}

.imgbox,.txtbox,.cl-R .txtbox{display: block;padding-left: 0px;padding-right: 0px;margin: 0 auto;text-align: center;}
.imgbox img{}
    
.clmLR .imgbox,.clmLR .txtbox,.cl-R.clmLR .txtbox{display: table-cell;}
.clmLR .txtbox{padding-left: 30px;}
.clmLR.cl-R .txtbox{padding-left: 0px !important;padding-right: 30px;order: -1;}    
.up-dn .txtbox{padding-left: 0px;}
    
.txtbox{margin-top: 1rem;}
    
.clm-1,.clm-2,.clm-3,.clm-4,.clm-5,.clm-LR{width: 100%;}
.cl-sp2{width: 50% !important;}
    
.clm-2,.clm-3,.clm-4{width: 100%;}
.clm-5,.clm-6,.clm-7,.clm-8,.clm-9,.clm-10{width: 50%;}     
    
/*.flx*/
.flx{
    flex-direction: column; 
    justify-content: center;
    }  
.cl-R.flx > .txtbox{
    order: 0;
    } 
.flx-box.no-wrap {flex-wrap: wrap;}
   
}      

@media screen and (max-width:479px){
.inrbox{display: block;}
}

/*.カラム落ち*/
.outer-box,.outer-boxLR{text-align: center;}
.outer-boxLR{max-width: 600px;margin: 0 auto;}

@media screen and (max-width:700px){
.outer-boxLR{max-width: 300px;}
}

/*-------------------------------------
　mbmt(PC)
---------------------------------------*/
    .mt150{
        margin-top: 150px !important;
    }
    .mt100{
        margin-top: 100px !important;
    }
    .mt90{
        margin-top: 90px !important;
    }
    .mt80{
        margin-top: 80px !important;
    }
    .mt70{
        margin-top: 70px !important;
    }
    .mt60{
        margin-top: 60px !important;
    }
    .mt50{
        margin-top: 50px !important;
    }
    .mt40{
        margin-top: 40px !important;
    }
    .mt30{
        margin-top: 30px !important;
    }
    .mt20{
        margin-top: 20px !important;
    }
    .mt10{
        margin-top: 10px !important;
    }
    .mt0{
        margin-top: 0px !important;
    }

    .mb150{
        margin-bottom: 150px !important;
    }
    .mb100{
        margin-bottom: 100px !important;
    }
    .mb90{
        margin-bottom: 90px !important;
    }
    .mb80{
        margin-bottom: 80px !important;
    }
    .mb70{
        margin-bottom: 70px !important;
    }
    .mb60{
        margin-bottom: 60px !important;
    }
    .mb50{
        margin-bottom: 50px !important;
    }
    .mb40{
        margin-bottom: 40px !important;
    }
    .mb30{
        margin-bottom: 30px !important;
    }
    .mb20{
        margin-bottom: 20px !important;
    }
    .mb10{
        margin-bottom: 10px !important;
    }
    .mb0{
        margin-bottom: 0px !important;
    }

@media screen and (max-width:479px){
    .mt150{
        margin-top: 100px !important;
    }
    .mt100{
        margin-top: 65px !important;
    }
    .mt90{
        margin-top: 60px !important;
    }
    .mt80{
        margin-top: 55px !important;
    }
    .mt70{
        margin-top: 45px !important;
    }
    .mt60{
        margin-top: 40px !important;
    }
    .mt50{
        margin-top: 35px !important;
    }
    .mt40{
        margin-top: 25px !important;
    }
    .mt30{
        margin-top: 20px !important;
    }
    .mt20{
        margin-top: 15px !important;
    }
    .mt10{
        margin-top: 7px !important;
    }
    .mt0{
        margin-top: 0px !important;
    }    

    .mb150{
        margin-bottom: 100px !important;
    }
    .mb100{
        margin-bottom: 65px !important;
    }
    .mb90{
        margin-bottom: 60px !important;
    }
    .mb80{
        margin-bottom: 55px !important;
    }
    .mb70{
        margin-bottom: 45px !important;
    }
    .mb60{
        margin-bottom: 40px !important;
    }
    .mb50{
        margin-bottom: 35px !important;
    }
    .mb40{
        margin-bottom: 25px !important;
    }
    .mb30{
        margin-bottom: 20px !important;
    }
    .mb20{
        margin-bottom: 15px !important;
    }
    .mb10{
        margin-bottom: 7px !important;
    }   
    .mb0{
        margin-bottom: 0px !important;
    }     
    
}

    
/*-------------------------------------
　TAB-A　
---------------------------------------*/
.TAB-A{
    
}
.TAB-A .tabbox,.TAB-A input[type=radio]{
    display: none;
}    
.TAB-A label {
    text-align: center;
    display: block;
}  
.TAB-A input#tab-a-01:checked ~ .tabbox.tab-a-01,/*tabの数ぶん、追加する*/
.TAB-A input#tab-a-02:checked ~ .tabbox.tab-a-02
    {
    display: block;
}
    
/*style*/
.TAB-A label {
    background:#fff;
    border: 1px solid #ccc;
    color: #484848;
    padding: 1rem;
    position: relative;
    margin-bottom: 5px;
}       

/*アイコン＋*/
.TAB-A input[type=radio]+label::before,
.TAB-A input[type=radio]+label::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #484848;
    transition: all .4s;/*アニメーションの設定*/    
}
.TAB-A input[type=radio]+label::before{
    top:48%;
    right: 25px;
    transform: rotate(0deg);
    
}
.TAB-A input[type=radio]+label::after{    
    top:48%;
    right: 25px;
    transform: rotate(90deg);

}
/*アイコン-*/    
.TAB-A input[type=radio]:checked+label {
}     
/*closeというクラスがついたら形状変化　*/
.TAB-A input[type=radio]:checked+label::before{
    /*transform: rotate(135deg);/*+になる*/
    display: none;/*-になる*/
}
.TAB-A input[type=radio]:checked+label::after{
    /*transform: rotate(225deg);/*+になる*/
    transform: rotate(0deg);/*-になる*/
} 
.TAB-A .tabbox {
}         

/*-------------------------------------
　TAB-B　(TABの数 3つ
---------------------------------------*/
.TAB-B{
    display: flex;
    flex-wrap: wrap;
    order: -1;
    justify-content: space-between;
    gap: 0.5%;/*gap tabの隙間*/
}
.TAB-B .tabbox,.TAB-B input[type=radio]  {
    display: none;
}    
.TAB-B label {
    width: calc(99%/3);;/* 100% - gap×(n-1) / tabの数 n=3 */
    text-align: center;
}  
.TAB-B input#tab-b-01:checked ~ .tabbox.tab-b-01,/*tabの数ぶん、追加する*/
.TAB-B input#tab-b-02:checked ~ .tabbox.tab-b-02,
.TAB-B input#tab-b-03:checked ~ .tabbox.tab-b-03
    {
    width: 100%;
    display: block;
}
    
/*style*/
.TAB-B label {
    background:#ececec;
    color: #484848;
    padding: 1rem;
} 
.TAB-B input[type=radio]:checked+label {
    background: white;
    border-top: 4px solid #004da1;
} 
.TAB-B .tabbox {
}
        
/*-------------------------------------
　TAB-C
---------------------------------------*/
.tablist{
    display: flex;
    flex-wrap: nowrap;
    order: -1;
    gap: 0.5%;/*gap tabの隙間*/
} 
.tablist .tablist-li {
    width: 100%;
    text-align: center;
    list-style-type: none;
} 
.tabbox-C{
    display: none;
}     
.tabbox-C.active{
    width: 100%;
    display: block;
}   
      
/*style.TAB-B*/
.TAB-C .tablist-li {
    background:#ececec;
    color: #484848;
    padding: 1rem;
} 
.TAB-C .tablist-li.active {
    background: white;
    border-top: 4px solid #00a2e6;
} 
.TAB-C .tabbox-C {
}     
      
/*-------------------------------------
　TAB-D　
---------------------------------------*/
.TAB-D{
    
}
.TAB-D .tabbox,.TAB-D input[type=checkbox]{
    display: none;
}    
.TAB-D label {
    text-align: center;
    display: block;
}  
.TAB-D input#tab-d-01:checked ~ .tabbox.tab-d-01,/*tabの数ぶん、追加する*/
.TAB-D input#tab-d-02:checked ~ .tabbox.tab-d-02

{
    display: block;
}

/*style*/
.TAB-D label {
    background:#fff;
    border: 1px solid #ccc;
    color: #000000;
    padding: 1rem;
    position: relative;
    margin-bottom: 5px;
}       

/*アイコン＋*/
.TAB-D input[type=checkbox]+label::before,
.TAB-D input[type=checkbox]+label::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #000000;
    
}
.TAB-D input[type=checkbox]+label::before{
    top:48%;
    right: 25px;
    transform: rotate(0deg);
    
}
.TAB-D input[type=checkbox]+label::after{    
    top:48%;
    right: 25px;
    transform: rotate(90deg);

}
/*アイコン-*/    
.TAB-D input[type=checkbox]:checked+label {
}     
/*　closeというクラスがついたら形状変化　*/
.TAB-D input[type=checkbox]:checked+label::before{
    transform: rotate(45deg);
}
.TAB-D input[type=checkbox]:checked+label::after{
    transform: rotate(-45deg);
    /*display: none;*/
} 
.TAB-D .tabbox {
    padding: 1rem;
    margin-bottom: 5px;
}


/*-------------------------------------
　PCSPだし分けCSS下部に記入
---------------------------------------*/
@media screen and (min-width:970px){
.spOnly {
    display: none !important;
}
.pcOnly {
    /*display: initial !important;*/
}      
}
@media screen and (max-width:969px){
.spOnly {
    /*display: initial !important;*/
}    
.pcOnly {
    display: none !important;
}       
}

/*-------------------------------------
　PC/SP/TABだし分け(MV)
---------------------------------------*/
@media screen and (min-width:1920px){
.MVpcOnly {
}     
.MVtabOnly {
    display: none !important;
}
.MVspOnly {
    display: none !important;
}
}

@media screen and (min-width:480px) and (max-width:1919px){
.MVpcOnly {
    display: none !important;
}
.MVtabOnly {
}    
.MVspOnly {
    display: none !important;
}  
}

@media screen and (max-width:479px){
.MVpcOnly {
    display: none !important;
}
.MVtabOnly {
    display: none !important;
}  
.MVspOnly {
}
}


/*スクロールsp*/   
@media screen and (max-width:479px){
    .scroll-sp{
    overflow-x: scroll;
    white-space: nowrap;
    scrollbar-width: none;/*Firefox*/
    overflow-scrolling: touch;/*SP*/
    -ms-overflow-style: none;/*IE,Edge*/
    -webkit-overflow-scrolling: touch;/*SP*/
    }
    .scroll-sp::-webkit-scrollbar{
      display: none; /*Chrome,Safari*/    
    }
    #container #main .scroll-sp img.lpImg{
    max-width: none !important;
    }
    }

/*上からフェードイン*/
.fade-in-top {
   opacity: 0;
   animation: fadein-top 1.5s ease-out forwards;
}
@keyframes fadein-top {
   0% {
      opacity: 0;
      transform: translateY(-100%);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

/*下からフェードイン*/
.fade-in-bottom {
   opacity: 0;
   animation: fadein-bottom 1.5s ease-out forwards; 
}
@keyframes fadein-bottom {
   0% {
      opacity: 0;
      transform: translateY(100%);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

/*左からフェードイン*/
.fade-in-left {
   opacity: 0;
   animation: fadein-left 1.5s ease-out forwards;
}
@keyframes fadein-left {
   0% {
      opacity: 0;
      transform: translateX(-100%);
   }
   100% {
      opacity: 1;
      transform: translateX(0);
   }
}

/*右からフェードイン*/
.fade-in-right {
   opacity: 0;
   animation: fadein-right 1.5s ease-out forwards;
}
@keyframes fadein-right {
   0% {
      opacity: 0;
      transform: translateX(100%);
   }
   100% {
      opacity: 1;
      transform: translateX(0);
   }
}