@charset 'utf-8';
/*	Cascading Style Sheets: style.css 5.2	*/


.CONTENTS span.ENG	{ width:140px; }

.FLASH	{ width:970px; height:453px; float:left; display:inline; clear:both; margin:0px 0px 0px 0px; background-repeat:no-repeat; }
.FLASH h1	{ width:auto; float:left; display:inline; clear:none; border:none; padding-bottom:0px; margin:0px; }
.SHEET h1	{ width:970px; height:450px; float:left; display:inline; clear:none; border:none; padding-bottom:0px; margin:0px; }

.GLOBAL	{ margin:0px 0px 0px 0px; }
.swiper-container { width:970px; height:450px; position:absolute !important; z-index:0; top:0; left:0; }
.swiper-wrapper { width:6790px; margin-left:970px; }
.swiper-wrapper .swiper-slide img.SP{ display: none; }
.swiper-wrapper a:hover { opacity:0.7; }
.swiper-button-prev { background:none; }
.swiper-button-prev::before { font-family: "Font Awesome 5 Free"; content: '\f053'; font-weight: 900; font-size:30px; color:#fff; }
.swiper-button-next { background:none; }
.swiper-button-next::before { font-family: "Font Awesome 5 Free"; content: '\f054'; font-weight: 900; font-size:30px; color:#fff; }
.GLOBAL ul	{ margin:389px 0px 0px 0px; position:relative; z-index:1; }
.GLOBAL ul li	 a.TOP img	{ margin-left:-114px; }
.GLOBAL ul li	 a.TOP:link img	{ margin-left:-114px; }
.GLOBAL ul li	 a.TOP:visited img	{ margin-left:-114px; }
.GLOBAL ul li	 a.TOP:hover img	{ margin-left:-114px; }
.GLOBAL ul li	 a.TOP:active img	{ margin-left:-114px; }

.CONTENTS a.TEXT	{ float:left; display:inline; color:#3cf; text-decoration:none; font-size:11px; }
.CONTENTS a.TEXT:link	{ color:#3cf; text-decoration:none; }
.CONTENTS a.TEXT:visited	{ color:#3cf; text-decoration:none; }
.CONTENTS a.TEXT:hover	{ color:#3cf; text-decoration:underline; }
.CONTENTS a.TEXT:active	{ color:#3cf; text-decoration:underline; }

.CONTENTS .MAIN	{ float:left; }

.CONTENTS .MAIN .FEA 	{ width:710px; float:left; display:inline; clear:none; margin:0px; border-left:1px solid #999; }
.CONTENTS .MAIN a.FEATURED	{ width:170px; height:240px; float:left; display:inline; clear:none; border-right:1px solid #999; border-bottom:1px solid #999; padding-bottom:10px; background:#fff; }
.CONTENTS .MAIN a.FEATURED:link	{ background:#fff; }
.CONTENTS .MAIN a.FEATURED:visited	{ background:#fff; }
.CONTENTS .MAIN a.FEATURED:hover	{ background:#e9e8e7; }
.CONTENTS .MAIN a.FEATURED:active	{ background:#e9e8e7; }
.CONTENTS .MAIN a.FEATURED img	{ width:140px; height:105px; float:left; display:inline; clear:none; margin:10px 0px 0px 15px; }
.CONTENTS .MAIN a.FEATURED ul	{ width:155px; float:left; display:inline; margin:5px 0px 0px 15px; font-size:10px; line-height:1.5em; }
.CONTENTS .MAIN a.FEATURED ul li.ARROW	{ background:url(../../img/s_arrow.gif) no-repeat 0px 4px; }
.CONTENTS .MAIN a.FEATURED:link ul li.DETAIL	{ color:#3cf; text-decoration:none; }
.CONTENTS .MAIN a.FEATURED:visited ul li.DETAIL	{ color:#3cf; text-decoration:none; }
.CONTENTS .MAIN a.FEATURED:hover ul li.DETAIL	{ color:#3cf; text-decoration:underline; }
.CONTENTS .MAIN a.FEATURED:active ul li.DETAIL	{ color:#3cf; text-decoration:underline; }

.CONTENTS .MAIN dl.TOPICS 	{ width:690px; float:left; display:inline; clear:none; margin:0px; border-bottom:1px dotted #999; font-size:11px; }
.CONTENTS .MAIN dl.TOPICS dt 	{ float:left; display:inline; clear:none; width:110px; line-height:1.5em; margin:5px 0px 0px 0px; padding-bottom:5px; }
.CONTENTS .MAIN dl.TOPICS dt img 	{ float:right; display:inline; clear:none; margin:3px 15px 0px 0px; vertical-align:top; }
.CONTENTS .MAIN dl.TOPICS dt span 	{ float:left; display:inline; clear:none; margin:0px; }
.CONTENTS .MAIN dl.TOPICS dd 	{ float:left; display:inline; clear:none; width:580px; line-height:1.5em; margin:5px 0px 0px 0px; padding-bottom:5px; }
.CONTENTS .MAIN dl.TOPICS dd p 	{ float:left; display:inline; clear:none; margin:0px; }
.CONTENTS .MAIN dl.TOPICS dd a:link	{ color:#3cf; text-decoration:none; }
.CONTENTS .MAIN dl.TOPICS dd a:visited	{ color:#3cf; text-decoration:none; }
.CONTENTS .MAIN dl.TOPICS dd a:hover	{ color:#3cf; text-decoration:underline; }
.CONTENTS .MAIN dl.TOPICS dd a:active	{ color:#3cf; text-decoration:underline; }
.CONTENTS .MAIN .TOP_REFORM{margin-top: 30px;float: left;display: inline;}

.CONTENTS .MAIN ul.LINK	{ width:690px; float:left; display:inline; clear:none; margin:70px 0px 0px 0px; background:none; }
.CONTENTS .MAIN ul.LINK li	{ float:left; display:inline; clear:none; margin:0px 0px 0px 11px; padding:0px; text-align:center; }
.CONTENTS .MAIN ul.LINK li a	{ width:222px; height:117px; float:left; display:inline; clear:none; background:none; margin:0px auto; overflow:hidden; text-align:center; }
.CONTENTS .MAIN ul.LINK li a img	{ margin:0px auto; }

.CONTENTS .SIDE	{ float:right; }
.CONTENTS .SIDE a.TEXT	{ border:none; width:auto; height:auto; background:#fff; }
.CONTENTS .SIDE a.TEXT:link	{ background:#fff; }
.CONTENTS .SIDE a.TEXT:visited	{ background:#fff; }
.CONTENTS .SIDE a.TEXT:hover	{ background:#fff; }
.CONTENTS .SIDE a.TEXT:active	{ background:#fff; }

.CONTENTS .SIDE a.TEXT span	{ float:left; display:inline; color:#3cf; font-size:11px; margin:0px; }
.CONTENTS .SIDE a.TEXT:link span	{ color:#3cf; text-decoration:none; }
.CONTENTS .SIDE a.TEXT:visited span	{ color:#3cf; text-decoration:none; }
.CONTENTS .SIDE a.TEXT:hover span	{ color:#3cf; text-decoration:underline; }
.CONTENTS .SIDE a.TEXT:active span	{ color:#3cf; text-decoration:underline; }

.CONTENTS .SIDE ul { width:205px; float:left; display:inline; border-bottom:1px solid #999; margin-top:30px; }
.CONTENTS .SIDE ul li { width:205px; float:left; display:inline; border-top:1px solid #999; }
.CONTENTS .SIDE ul li.BANNER { border:none; }
.CONTENTS .SIDE ul li a { width:205px; height:60px; border:none; float:left; display:inline; background:no-repeat; }
.CONTENTS .SIDE ul li a.C25 { height:auto; background-image:none; }
.CONTENTS .SIDE ul li.BANNER a { height:auto; margin:0 0 10px 0; }
.CONTENTS .SIDE ul li a img { width:100%; }
.CONTENTS .SIDE ul li strong	{ width:140px; float:left; display:inline; margin:12px 0px 0px 60px; background:url(../../img/s_arrow.gif) no-repeat 0px 50%; padding-left:10px; line-height:1.5em; }
.CONTENTS .SIDE ul li strong.MM	{ background-image:url(../../img/s_arrow_or.gif); color:#ff8b00; }
.CONTENTS .SIDE ul li span	{ width:150px; float:left; display:inline; margin:3px 0px 0px 60px; font-size:10px; line-height:1.5em; }
.CONTENTS .SIDE ul li.QR { height:75px; background:url(../img/s_qr.gif) no-repeat 0px 7px; }
.CONTENTS .SIDE ul li.QR strong	{ width:130px; margin:5px 0px 0px 70px; background:none; padding-left:0px; }
.CONTENTS .SIDE ul li.QR span	{ width:130px; margin:0px 0px 0px 70px; }

.CONTENTS .SIDE ul li a img.SP{display: none;}
.TEXT img.SP{display: none;}
.CONTENTS .SIDE .BANNER a:hover{opacity: 0.7;}
.CONTENTS .MAIN a.TOP_REFORM img.SP{display: none;}


@media (max-width: 740px) {

    .CONTENTS{margin-top: 60px;}
    .CONTENTS span.ENG	{ width:140px; }

    .FLASH	{ width:970px; height:453px; float:left; display:inline; clear:both; margin:0px 0px 0px 0px; background-repeat:no-repeat; }
    .FLASH h1	{ width:auto; float:left; display:inline; clear:none; border:none; padding-bottom:0px; margin:0px; }
    .SHEET h1	{ width: 100vw;height: 410px; }
    
    .GLOBAL	{ margin:0px 0px 0px 0px; width: 100vw;display: none;}
    .swiper-container { width:100vw; height:auto; position:absolute !important; z-index:0; top:0; left:0; }
    .swiper-wrapper { width:700vw; margin-left:-100vw; }
    .swiper-wrapper .swiper-slide img.PC{ display: none; }
    .swiper-wrapper .swiper-slide img.SP{ display: block; }
    .swiper-wrapper a:hover { opacity:0.7; }
    .swiper-slide{width: 100vw!important;}
    .swiper-slide img {width: 100%;}
    .swiper-button-prev { background:none; }
    .swiper-button-prev::before { font-family: "Font Awesome 5 Free"; content: '\f053'; font-weight: 900; font-size:30px; color:#fff; }
    .swiper-button-next { background:none; }
    .swiper-button-next::before { font-family: "Font Awesome 5 Free"; content: '\f054'; font-weight: 900; font-size:30px; color:#fff; }
    .GLOBAL ul	{ margin:389px 0px 0px 0px; position:relative; z-index:1; }
    .GLOBAL ul li	 a.TOP img	{ margin-left:-114px; }
    .GLOBAL ul li	 a.TOP:link img	{ margin-left:-114px; }
    .GLOBAL ul li	 a.TOP:visited img	{ margin-left:-114px; }
    .GLOBAL ul li	 a.TOP:hover img	{ margin-left:-114px; }
    .GLOBAL ul li	 a.TOP:active img	{ margin-left:-114px; }
    
    .CONTENTS a.TEXT	{ width: 95vw; margin: 0 2.5vw; font-size: 14px;margin-top: 5px;display: none;}
    .CONTENTS a.TEXT:link	{ color:#3cf; text-decoration:none; }
    .CONTENTS a.TEXT:visited	{ color:#3cf; text-decoration:none; }
    .CONTENTS a.TEXT:hover	{ color:#3cf; text-decoration:underline; }
    .CONTENTS a.TEXT:active	{ color:#3cf; text-decoration:underline; }
    
    .CONTENTS .MAIN	{ float:left; }
    
    .CONTENTS .MAIN .FEA 	{ width: 95vw; margin: 0 2.5vw; }
    .CONTENTS .MAIN a.FEATURED	{ width:170px; height:240px; float:left; display:inline; clear:none; border-right:1px solid #999; border-bottom:1px solid #999; padding-bottom:10px; background:#fff;border-top: .5px solid #999; }
    .CONTENTS .MAIN a.FEATURED:link	{ background:#fff; }
    .CONTENTS .MAIN a.FEATURED:visited	{ background:#fff; }
    .CONTENTS .MAIN a.FEATURED:hover	{ background:#e9e8e7; }
    .CONTENTS .MAIN a.FEATURED:active	{ background:#e9e8e7; }
    .CONTENTS .MAIN a.FEATURED img	{ width:140px; height:105px; float:left; display:inline; clear:none; margin:10px 0px 0px 15px; }
    .CONTENTS .MAIN a.FEATURED ul	{ font-size: 13px;}
    .CONTENTS .MAIN a.FEATURED ul li.ARROW	{ background:url(../../img/s_arrow.gif) no-repeat 0px 4px; }
    .CONTENTS .MAIN a.FEATURED:link ul li.DETAIL	{ color:#3cf; text-decoration:none; }
    .CONTENTS .MAIN a.FEATURED:visited ul li.DETAIL	{ color:#3cf; text-decoration:none; }
    .CONTENTS .MAIN a.FEATURED:hover ul li.DETAIL	{ color:#3cf; text-decoration:underline; }
    .CONTENTS .MAIN a.FEATURED:active ul li.DETAIL	{ color:#3cf; text-decoration:underline; }
    
    .CONTENTS .MAIN dl.TOPICS 	{ width: 95vw;display: flex;flex-direction: column;margin: 0 2.5vw; margin-top: 10px;}
    .CONTENTS .MAIN dl.TOPICS dt 	{ align-items: center;padding-bottom: 0px; }
    .CONTENTS .MAIN dl.TOPICS dt img 	{ margin: 0 5px;width: 25px; }
    .CONTENTS .MAIN dl.TOPICS dt span 	{ float:left; display:inline; clear:none; margin:0px; }
    .CONTENTS .MAIN dl.TOPICS dd 	{ width: 95vw; font-size: 14px;}
    .CONTENTS .MAIN dl.TOPICS dd p 	{ float:left; display:inline; clear:none; margin:0px; }
    .CONTENTS .MAIN dl.TOPICS dd a:link	{ color:#3cf; text-decoration:none; }
    .CONTENTS .MAIN dl.TOPICS dd a:visited	{ color:#3cf; text-decoration:none; }
    .CONTENTS .MAIN dl.TOPICS dd a:hover	{ color:#3cf; text-decoration:underline; }
    .CONTENTS .MAIN dl.TOPICS dd a:active	{ color:#3cf; text-decoration:underline; }
    .CONTENTS .MAIN a.TOP_REFORM{width: 95vw;margin: 10px 2.5vw 0 2.5vw;}
    .CONTENTS .MAIN a.TOP_REFORM img.PC{display: none;}
    .CONTENTS .MAIN a.TOP_REFORM img.SP{display: block;width: 95vw;}


    
    .CONTENTS .MAIN ul.LINK	{ margin: 0px; margin-bottom: 20px; }
    .CONTENTS .MAIN ul.LINK li	{ float:left; display:inline; clear:none; margin:0px 0px 0px 11px; padding:0px; text-align:center; }
    .CONTENTS .MAIN ul.LINK li a	{ width:222px; height:117px; float:left; display:inline; clear:none; background:none; margin:0px auto; overflow:hidden; text-align:center; }
    .CONTENTS .MAIN ul.LINK li a img	{ margin:0px auto; }
    
    .CONTENTS .SIDE	{ float:right; width: 100vw;display: flex;flex-direction: column;}
    .CONTENTS .SIDE a.TEXT	{ display: flex;flex-direction: column; width: 95vw;}
    .CONTENTS .SIDE a.TEXT:link	{ background:#fff; }
    .CONTENTS .SIDE a.TEXT:visited	{ background:#fff; }
    .CONTENTS .SIDE a.TEXT:hover	{ background:#fff; }
    .CONTENTS .SIDE a.TEXT:active	{ background:#fff; }
    
    .CONTENTS .SIDE a.TEXT span	{ display: none; }
    .CONTENTS .SIDE a.TEXT:link span	{ color:#3cf; text-decoration:none; }
    .CONTENTS .SIDE a.TEXT:visited span	{ color:#3cf; text-decoration:none; }
    .CONTENTS .SIDE a.TEXT:hover span	{ color:#3cf; text-decoration:underline; }
    .CONTENTS .SIDE a.TEXT:active span	{ color:#3cf; text-decoration:underline; }
    
    .CONTENTS .SIDE ul { width: 95vw;display: flex;flex-direction: column; margin: 10px 2.5vw 0 2.5vw;}
    .CONTENTS .SIDE ul li { width: 95vw; }
    .CONTENTS .SIDE ul li.BANNER { border:none; }
    .CONTENTS .SIDE ul li a { width: 95vw; padding-bottom: 10px;}
    .CONTENTS .SIDE ul li a.C25 { height:auto; background-image:none; }
    .CONTENTS .SIDE ul li.BANNER a { width: 95vw;}
    .CONTENTS .SIDE ul li a img { width:100%; }
    .CONTENTS .SIDE ul li strong	{ font-size: 16px; }
    .CONTENTS .SIDE ul li strong.MM	{ background-image:url(../../img/s_arrow_or.gif); color:#ff8b00; font-size: 16px;}
    .CONTENTS .SIDE ul li span	{ width: 70vw;font-size: 14px;}
    .CONTENTS .SIDE ul li.QR { height:75px; background:url(../img/s_qr.gif) no-repeat 0px 7px; }
    .CONTENTS .SIDE ul li.QR strong	{ width:130px; margin:5px 0px 0px 70px; background:none; padding-left:0px; }
    .CONTENTS .SIDE ul li.QR span	{ width:130px; margin:0px 0px 0px 70px; }

    .CONTENTS .SIDE ul li a img.SP{display: block;}
    .TEXT img.SP{display: block;width: 95vw;}
    .CONTENTS .SIDE ul li a img.PC{display: none;}
    .TEXT img.PC{display: none;}




    .out{
        position: relative;
    }
    .in img{
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: .5s;
        z-index: 0;
    }
    img{
        display: block;
        width: 100%;
        height: auto;
    }
    input{
        display: none;
    }
    .in{
        display: flex;
        justify-content: center;
        height: 440px;
    }
    label span{
        display: block;
        width: 15px;
        height: 15px;
        padding: 7px;
        margin: -40px 0 0;
        border-radius: 100%;
        cursor: pointer;
        position: relative;
        z-index: 2;
    }
    label span::before{
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: #4287f5;
        opacity: 0.5;
        border-radius: 100%;
    }            
    input:nth-of-type(1):checked ~ .in label:nth-of-type(1) span::before,
    input:nth-of-type(2):checked ~ .in label:nth-of-type(2) span::before,
    input:nth-of-type(3):checked ~ .in label:nth-of-type(3) span::before,
    input:nth-of-type(4):checked ~ .in label:nth-of-type(4) span::before{
        background: #000;
        opacity: 1;
    }
    label span::before{
        animation: slidebutton 16s infinite;
    }
    @keyframes slidebutton{
        0%{opacity: 0.5;background: #4287f5;}
        3.5%{opacity: 1;background: #000;}/* b÷x×100=y */
        25%{opacity: 1;background: #000;}/* 100÷c=z */
        28.5%{opacity: 0.5;background: #4287f5;}/* y+z */
    }            
    label:nth-of-type(2) span::before,label:nth-of-type(2) img{
        animation-delay: 4s;
    }            
    label:nth-of-type(3) span::before,label:nth-of-type(3) img{
        animation-delay: 8s;
    }            
    label:nth-of-type(4) span::before,label:nth-of-type(4) img{
        animation-delay: 12s;
    }            
    input:nth-of-type(1):checked ~ .in label:nth-of-type(1) img,
    input:nth-of-type(2):checked ~ .in label:nth-of-type(2) img,
    input:nth-of-type(3):checked ~ .in label:nth-of-type(3) img,
    input:nth-of-type(4):checked ~ .in label:nth-of-type(4) img{
        opacity: 1;
        z-index: 1;
    }
    .in img{
        animation: slide 16s infinite;/* (a+b)×c=x */
        opacity: 0;
    }
    @keyframes slide{
        0%{opacity: 0;}
        3.5%{opacity: 1;z-index: 1;}/* b÷x×100=y */
        25%{opacity: 1;}/* 100÷c=z */
        28.5%{opacity: 0;z-index: 0;}/* y+z */
    }
    input:checked ~ .in img,input:checked ~ .in span::before{
        animation: none;
    }
    .in:hover img,.in:hover span::before{
        animation-play-state:paused;/* マウスを載せると一時停止 */
    }


    
}
@media (max-width: 375px) {
    .CONTENTS {margin-top: 30px;}
}