@charset "UTF-8";
a img:hover{ opacity:0.7; filter:alpha(opacity=70); transition: all .5s; outline: none;}

#mirai .h2Area{ width: 100%; background: url("../images/bg-mirai01-pc.jpg") no-repeat center top; padding: 20px 0 140px;}
#mirai .h2Area h2{ text-align: center; margin: 0 auto 60px;}
#mirai .h2Area .mmLead{ font-size: 22px; line-height: 200%; text-align: center;}
#mirai .motegiArea{ width: 100%; background: url("../images/bg-mirai02-pc.jpg") no-repeat center top; padding: 50px 0 130px;}
#mirai .motegiArea h3{ width: 600px; text-align: center; margin: 0 auto 20px;}
#mirai .motegiArea .ex{ font-size: 16px; line-height: 200%; text-align: center; margin-bottom: 120px;}
#mirai .motegiArea .ex.mt{ margin-top: 20px;}
#mirai .youtube{ width: 100%;}
#mirai .hanabi{ width: 100%; background: url("../images/bg-mirai03-pc.jpg") no-repeat center top; padding-bottom: 90px;}
#mirai .hanabi h3{ text-align: center; margin: 0 auto 50px;}
#mirai .hanabi .hanabiImg{ margin-bottom: 30px;}
#mirai .hanabi .hanabiImg a{ display: block;}
#mirai .hanabi .hanabiTxt{ font-size: 16px; line-height: 200%; text-align: center;}

#mirai .cautionBox_short{ width: 50%; margin: 0 auto 10px; background: #fff; padding: 20px; text-align: center;}
#mirai .cautionBox{ margin: 20px auto; background: #fff; padding: 20px}
#mirai .cautionBox .cautionTtl{ margin: 0 auto 10px; font-size: 14px;}
#mirai .dotList{ margin-top: 10px;}
#mirai .dotList li{ text-indent: -1em; padding-left: 1em; line-height: 2;}

#mirai .contentsBox{ width: 100%; margin: 0 auto; padding-bottom: 120px}
#mirai .contentsBox.bg02{ width: 100%; background: url("../images/bg-mirai03-pc.jpg") no-repeat center top;}
/*#mirai .contentsBox h3{ text-align: center; margin: 0 auto 50px;}*/
#mirai .contentsBox h4.ttl-sub{ text-align: center; margin: 0 auto 50px;}
#mirai .contentsBox .center-imgW{ width: 100%; margin: 0 auto; text-align: center;}
#mirai .contentsBox .center-catchW{ width: 100%; margin: 30px auto 30px; text-align: center; font-weight: bold; font-size: 20px;}
#mirai .contentsBox .center-txtW{ margin-top: 30px; font-size: 16px; line-height: 200%; text-align: center;}
#mirai .contentsBox .center-txtW.pb40{ padding-bottom: 40px;}

#mirai .Inner{ width: 960px; margin: 0 auto;}
#mirai .Inner.mb120{ width: 960px; margin: 0 auto 120px;}

/**--- imgSplit ---**/
#mirai .imgSplit{ width: 100%; margin: 0 auto; display: flex; justify-content: space-between; gap: 30px;}
#mirai .imgSplit li{ width: 50%;}

/**--- NEWS AREA ---**/
#mirai .newsArea{ width: 100%;}/*
#mirai .newsArea .subTtl{ margin-top: 15px; text-align: center;}*/
#mirai .info-list{ margin: 44px auto 0; font-size: 17px; max-height: 360px; overflow-y: auto;}
#mirai .info-list li{ padding: 23px 0 22px 25px; background-image: linear-gradient(to right, black 33%, rgba(255, 255, 255, 0) 0%); background-position: top; background-size: 10px 1px; background-repeat: repeat-x; position: relative;}
#mirai .info-list li .info-text{ margin-left: 300px; margin-top: -28px;}
#mirai .info-list li .info-text a{ color: #333;}
#mirai .info-list li .info-text a:hover{ text-decoration: underline;}
#mirai .info-list li .tag{ display: inline-block; border-radius: 1px; margin-right: 20px; padding-top: 3px; width: 165px; height: 32px; text-align: center; font-weight: 600; color: #666;}
#mirai .info-list li .tag-announce{ background-color: #FFE8E2;}
#mirai .info-list li .tag-recommend{ background-color: #FFFCE2;}
#mirai .info-list li .tag-event{ background-color: #C4ECD7;}
#mirai .info-list li .tag-new{ background-color: #E1F6FF;}

/*#mirai .youtubeTtl{ margin: 120px auto 50px;}*/
#mirai .youtubeTtl.mt00{ margin-top: 0;}
#mirai .youtubeTtl img{ display: block; margin: 0 auto;}

#mirai .greenBox{ background: rgba(104, 180, 173, 0.1); padding: 30px 80px 40px; box-sizing: border-box;}
#mirai .greenBox.layout02{ margin-top: 20px; padding: 80px;}
#mirai .greenBox .carbike-article-list{ background: #fff;}

#mirai .point-txt{ font-weight: bold; color: #00a040; margin: 30px auto 10px; font-size: 18px; max-width: 430px; width: 100%;}
#mirai .point-txt::before{ content: "\FF3C"; margin-right: 10px;}
#mirai .point-txt::after{content: "\FF0F"; margin-right: 10px;}

#mirai .l-button.mt00{ margin-top: 0;}

.c-button { margin: 50px auto 0; font-size: 16px; font-weight: 400;}

.contentsBox > .carbike-article-list{ padding-top: 40px;}

.button {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    margin: 0 auto;
    width: 430px;
    height: auto;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    border: 1px dotted #333;
    position: relative;
    letter-spacing: 0.08em;
	padding: 20px 10px;
}

.link-border-bottom {
  color: #333333;
  border-bottom: 2px solid #333333;
  padding-bottom: 2px;
    transition: all 0.5s;
}

.otherCaution { margin-top: 10px; font-size: 14px; line-height: 2;}
.centerCaution { margin: 10px auto 0; font-size: 14px; line-height: 2; text-align: center;}

/*-- アコーディオン
----------------------------------------------*/
.contactAccordionBtn .button-icon{ width: 20px; height: 20px; transition: none; }
.contactAccordionBtn .button-icon .inner{ width: 20px; height: 20px; position: relative; display: block; transition: all 0.5s;}
.contactAccordionBtn:hover .button-icon{ transform: none;}
.contactAccordionBtn .button-icon .inner::before{ content: ""; display: block; height: 2px; width: 20px; background: #cccccc; position: absolute; top: calc(50% - 1px); left: 0;  transition: all 0.5s;}
.contactAccordionBtn .button-icon .inner::after{ content: ""; display: block; height: 20px; width: 2px; background: #cccccc; position: absolute; left: calc(50% - 1px); top: 0; transition: all 0.5s;}
.contactAccordionBtn.active .button-icon .inner{ transform: rotate(360deg);}
.contactAccordionBtn.active .button-icon .inner::before{ }
.contactAccordionBtn.active .button-icon .inner::after{ opacity: 0; transform: scaleY(0)}
.contactOpenBox{ display: none; padding-top: 40px;}
.contactOpenBox .details-list a{ text-decoration: underline; color: #00a040;}
.contactOpenBox .ttl{ font-size: 18px; font-weight: bold; margin: 40px auto 15px;}
.contactOpenBox .ttl:first-child{ margin-top: 0;}
.contactOpenBox .ttl::before{ content: "\25A0"; color: #00a040; margin-right: 7px;}
.contactOpenBox .linkList{ border-top: 1px dashed #d5d5d5;}
.contactOpenBox .linkList li{ border-bottom: 1px dashed #d5d5d5; padding: 10px; font-size: 14px; font-weight: bold; display: flex; width: 100%; box-sizing: border-box;}
.contactOpenBox .linkList li .text{ display: block; width: 200px;}
.contactOpenBox .linkList li a{ display: inline-block;/* margin-left: 30px;*/ color: #00a040; text-decoration: underline;}
.contactOpenBox .caution{ margin-top: 30px; font-size: 14px; line-height: 2;}

/**--- Release ---**/
#mirai .releaseArea{ width: 100%; background: url("../images/release/bg-release01-pc.jpg") no-repeat center top; padding: 50px 0 100px;}
#mirai .release{ width: 960px; margin: 0 auto;}
#mirai .release .heading-text{ text-align: center;}
/*#mirai .release .subTtl{ margin-top: 30px;}*/
#mirai .release .intro{ font-size: 17px; line-height: 180%; margin: 50px 0 120px;}
#mirai .release .sixItems{ width: 600px; margin: 40px auto 80px;}
#mirai .release .sixItems li{ height: 60px; margin-bottom: 10px; box-sizing: border-box; padding: 17px 0 0 66px; font-size: 17px;}
#mirai .release .sixItems li:last-child{ margin-bottom: 0;}
#mirai .release .sixItems li.items1-6{ background: url("../images/release/icon1.gif") no-repeat 10px 10px #F1F7F7; background-size: 40px;}
#mirai .release .sixItems li.items2-6{ background: url("../images/release/icon2.gif") no-repeat 10px 10px #F1F7F7; background-size: 40px;}
#mirai .release .sixItems li.items3-6{ background: url("../images/release/icon3.gif") no-repeat 10px 10px #F1F7F7; background-size: 40px;}
#mirai .release .sixItems li.items4-6{ background: url("../images/release/icon4.gif") no-repeat 10px 10px #F1F7F7; background-size: 40px;}
#mirai .release .sixItems li.items5-6{ background: url("../images/release/icon5.gif") no-repeat 10px 10px #F1F7F7; background-size: 40px;}
#mirai .release .sixItems li.items6-6{ background: url("../images/release/icon6.gif") no-repeat 10px 10px #F1F7F7; background-size: 40px;}
#mirai .release .imgArea{ margin: 0 auto;}
#mirai .release .imgArea .line1{ margin: 0 auto 60px;}
#mirai .release .imgArea .line2 ul{ display: flex; justify-content: space-between; align-items: center;}
#mirai .release .imgArea .line2 li{ width: 450px;}


/**--- splitList ---**/
ul.splitList li{ display: flex; justify-content: space-between; align-items: center; background: #fff; margin-bottom: 60px; position: relative;}
ul.splitList li:last-child{margin-bottom: 0;}
ul.splitList li:nth-child(odd){ flex-direction: row;}
ul.splitList li:nth-child(even){ flex-direction: row-reverse;}
ul.splitList li .noIcon{ width: 100px; position: absolute;}
ul.splitList li:nth-child(odd) .noIcon{ top: -50px; left: -50px;}
ul.splitList li:nth-child(even) .noIcon{ top: -50px; right: -50px;}
ul.splitList li .noIcon img{ width: 100%;}
ul.splitList li .photoArea {  width: 400px;}
ul.splitList li .photoArea img{ display: block; width: 100%;}
ul.splitList li .txtArea{ width: 400px; padding: 0 50px; box-sizing: border-box; font-size: 16px; font-weight: 600; line-height: 2; letter-spacing: 0.16em; display: flex; flex-direction: column; align-content: center;}
ul.splitList li .txtArea .l-button{ width: 100%;}
ul.splitList li .txtArea .l-button .button{ max-width: 100%; padding: 20px 20px 20px 10px; text-decoration: none; color: #333;}
ul.splitList li a{ color: #099f48; text-decoration: underline;}
ul.splitList li a:hover{ text-decoration: none;}


span.cancel{text-decoration: line-through;}

.fs90{ font-size: 90%;}

.pc{ display:inline !important;}
.sp{ display:none !important;}


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

a img:hover{ opacity: 1; filter:alpha(opacity=100); transition: none; outline: none;}

#mirai .h2Area{ width: auto; background: url("../images/bg-mirai01-sp.jpg") no-repeat center top; background-size: 100%; padding: 5% 2% 15%;}
#mirai .h2Area h2{ width: 84%; text-align: center; margin: 0 auto 5%;}
#mirai .h2Area .mmLead{ font-size: 3.7vw; line-height: 200%; text-align: center;}
#mirai .motegiArea{ width: auto; background: url("../images/bg-mirai02-sp.jpg") no-repeat center top; background-size: 100%; padding: 6% 2% 0;}
#mirai .motegiArea h3{ width: 84%; text-align: center; margin: 0 auto 7%;}
#mirai .motegiArea .ex{ font-size: 13px; line-height: 200%; text-align: center; margin-bottom: 8%;}
#mirai .motegiArea .ex.mt{ margin-top: 5%;}
#mirai .youtube{ position:relative; padding: 0 0 56.25%; height:0; overflow:hidden;}
#mirai .youtube iframe{ position:absolute; top:0; left:0; width:100%; height:100%;}	
    
#mirai .hanabi{ width: auto; background: url("../images/bg-mirai03-sp.jpg") no-repeat center top; background-size: 100%; padding: 15% 2% 10%;}
#mirai .hanabi h3{ width: 84%; text-align: center; margin: 0 auto 7%;}
#mirai .hanabi .hanabiImg{ margin-bottom: 6%;}
#mirai .hanabi .hanabiImg a{ display: block;}
#mirai .hanabi .hanabiTxt{ font-size: 13px; line-height: 200%; text-align: center;}

#mirai .cautionBox_short{ width: 100%; }    
#mirai .cautionBox{ margin: 20px auto;　background: #fff; padding: 10px}
#mirai .cautionBox .cautionTtl{ margin: 0 auto 10px; font-size: 11px;}
#mirai .dotList{ margin-top: 10px; font-size: 11px;}
#mirai .dotList li{ text-indent: -1em; padding-left: 1em; line-height: 2;}

#mirai .contentsBox{ width: 100%; margin: 0 auto; padding: 15% 2% 10%;}
#mirai .contentsBox.bg02{ width: auto; background: url("../images/bg-mirai03-sp.jpg") no-repeat center top; background-size: 100%; padding: 15% 2% 10%;}
/*#mirai .contentsBox h3{ width: 84%; text-align: center; margin: 0 auto 7%;}*/
#mirai .contentsBox h4.ttl-sub{ text-align: center; margin: 0 auto 7%;}
#mirai .contentsBox .center-imgW{ width: 100%; margin: 0 auto; text-align: center;}
#mirai .contentsBox .center-catchW{ width: 100%; margin: 30px auto 30px; text-align: center; font-weight: bold; font-size: 16px;}
#mirai .contentsBox .center-txtW{font-size: 13px; line-height: 200%; text-align: center;}
#mirai .contentsBox .center-txtW.pb40{ padding-bottom: 30px;}
    
#mirai .Inner{ width: auto; margin: 0 auto;}
#mirai .Inner.mb120{ width: auto; margin: 0 auto 15%;}


/**--- imgSplit ---**/
#mirai .imgSplit{ width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 7vw;}
#mirai .imgSplit li{ width: 100%;}
	
	
/**--- NEWS AREA ---**/
#mirai .newsArea{ width: 100%;}
#mirai .newsArea h3{ margin: 0 auto 2%;}
/*#mirai .newsArea .subTtl{ margin-top: 0; text-align: center;}*/
#mirai .info-list{ margin: 16px 5% 0; font-size: 12px; max-height: 280px; overflow-y: auto;}
#mirai .info-list li{ padding: 20px 20px 10px; background-image: linear-gradient(to right, black 33%, rgba(255, 255, 255, 0) 0%); background-position: top; background-size: 10px 1px; background-repeat: repeat-x; position: relative;}
#mirai .info-list li .info-text{ margin-left: 0; margin-top: 10px;}
#mirai .info-list li .info-text a{ color: #333;}
#mirai .info-list li .info-text a:hover{ text-decoration: underline;}
#mirai .info-list li .tag{ display: inline-block; border-radius: 1px; margin-right: 20px; padding-top: 4px; width: 140px; height: 25px; text-align: center; font-weight: 600; color: #666;}
#mirai .info-list li .tag-announce{ background-color: #FFE8E2;}
#mirai .info-list li .tag-recommend{ background-color: #FFFCE2;}
#mirai .info-list li .tag-event{ background-color: #C4ECD7;}
#mirai .info-list li .tag-new{ background-color: #E1F6FF;}

#mirai .youtubeTtl{ margin: 0 auto 7%; padding-top: 20%; width: 84%;}
#mirai .youtubeTtl.mt00{ padding-top: 0;}
#mirai .youtubeTtl img{ display: block; margin: 0 auto;}
    
#mirai .greenBox{ background: rgba(104, 180, 173, 0.1); padding: 5%; box-sizing: border-box;}
#mirai .greenBox.layout02{ margin: 12% auto; padding: 10% 7%;}
#mirai .greenBox .carbike-article-list{ background: #fff;}
    
#mirai .point-txt{ font-weight: bold; color: #00a040; margin: 7% auto 2%; font-size: 12px; max-width: 80%; width: 100%;}
#mirai .point-txt::before{ content: "\FF3C"; margin-right: 10px;}
#mirai .point-txt::after{content: "\FF0F"; margin-right: 10px;}

#mirai .l-button.mt00{ margin-top: 0;}

.otherCaution { margin-top: 10px; font-size: 12px; line-height: 2;}
.centerCaution { margin: 10px auto 0; font-size: 12px; line-height: 2; text-align: center;}
    
.c-button { margin: 5% auto 0; font-size: 16px; font-weight: 400; width: 80%;}
.l-button { margin: 5% auto 0; font-size: 16px; font-weight: 400; width: 80%;}
.button {
    font-size: 11px;
    max-width: 400px;
    width: 100%;
    height: auto;
	padding: 5%;
}

/*-- アコーディオン
----------------------------------------------*/
.contactAccordionBtn .button-icon{ width: 14px; height: 14px; transition: none; }
.contactAccordionBtn .button-icon .inner{ width: 14px; height: 14px; position: relative; display: block; transition: all 0.5s;}
.contactAccordionBtn:hover .button-icon{ transform: none;}
.contactAccordionBtn .button-icon .inner::before{ content: ""; display: block; height: 2px; width: 14px; background: #cccccc; position: absolute; top: calc(50% - 1px); left: 0;  transition: all 0.5s;}
.contactAccordionBtn .button-icon .inner::after{ content: ""; display: block; height: 14px; width: 2px; background: #cccccc; position: absolute; left: calc(50% - 1px); top: 0; transition: all 0.5s;}
.contactAccordionBtn.active .button-icon .inner{ transform: rotate(360deg);}
.contactAccordionBtn.active .button-icon .inner::before{ }
.contactAccordionBtn.active .button-icon .inner::after{ opacity: 0; transform: scaleY(0)}
.contactOpenBox{ display: none; padding-top: 30px;}
.contactOpenBox .details-list a{ text-decoration: underline; color: #00a040;}
.contactOpenBox .ttl{ font-size: 13px; font-weight: bold; margin: 40px auto 15px;}
.contactOpenBox .ttl:first-child{ margin-top: 0;}
.contactOpenBox .ttl::before{ content: "\25A0"; color: #00a040; margin-right: 7px;}
.contactOpenBox .linkList{ border-top: 1px dashed #d5d5d5;}
.contactOpenBox .linkList li{ border-bottom: 1px dashed #d5d5d5; padding: 10px 3px; font-size: 10.5px; font-weight: bold; display: flex; width: 100%; box-sizing: border-box;}
.contactOpenBox .linkList li .text{ display: block; width: 140px;}
.contactOpenBox .linkList li a{ display: inline-block; margin-left: 10px; color: #00a040; text-decoration: underline; text-align: 
right;}
.contactOpenBox .caution{ margin-top: 30px; font-size: 10px; line-height: 2;}
	
/**--- Release ---**/
#mirai .releaseArea{ width: 100%; background: url("../images/release/bg-release01-sp.jpg") no-repeat center top; background-size: 100%; padding: 0 0 10%;}
#mirai .release{ width: auto; margin: 0 5%;}
#mirai .release .heading-text{ text-align: center;}
/*#mirai .release .subTtl{ margin-top: 10px;}*/
#mirai .release .intro{ font-size: 3.4vw; line-height: 180%; margin: 8% 0 10%;}
#mirai .release .sixItems{ width: auto; margin: 8% auto 10%;}
#mirai .release .sixItems li{ height: auto; margin-bottom: 10px; box-sizing: border-box; padding: 10px 0 10px 40px; font-size: 3.3vw;}
#mirai .release .sixItems li:last-child{ margin-bottom: 0;}
#mirai .release .sixItems li.items1-6{ background: url("../images/release/icon1.gif") no-repeat 10px 10px #F1F7F7; background-size: 20px;}
#mirai .release .sixItems li.items2-6{ background: url("../images/release/icon2.gif") no-repeat 10px 10px #F1F7F7; background-size: 20px;}
#mirai .release .sixItems li.items3-6{ background: url("../images/release/icon3.gif") no-repeat 10px 10px #F1F7F7; background-size: 20px;}
#mirai .release .sixItems li.items4-6{ background: url("../images/release/icon4.gif") no-repeat 10px 10px #F1F7F7; background-size: 20px;}
#mirai .release .sixItems li.items5-6{ background: url("../images/release/icon5.gif") no-repeat 10px 10px #F1F7F7; background-size: 20px;}
#mirai .release .sixItems li.items6-6{ background: url("../images/release/icon6.gif") no-repeat 10px 10px #F1F7F7; background-size: 20px;}
#mirai .release .imgArea{ margin: 0 auto;}
#mirai .release .imgArea .line1{ margin: 0 auto;}
#mirai .release .imgArea .line2 ul{ display: block; justify-content: space-between; align-items: center;}
#mirai .release .imgArea .line2 li{ width: auto; margin: 5% auto 0;}



/**--- splitList ---**/
ul.splitList li{ width: 100%; display: block; background: #fff; margin: 15% auto 13%;}
ul.splitList li:last-child{ margin-bottom: 0;}
ul.splitList li:nth-child(odd){ flex-direction: row;}
ul.splitList li:nth-child(even){ flex-direction: row-reverse;}
ul.splitList li .photoArea{ width: 100%;}
ul.splitList li .photoArea img{ display: block; width: 100%;}
ul.splitList li:nth-child(odd) .photoArea img{ display: block;}
ul.splitList li:nth-child(even) .photoArea img{ display: block;}
ul.splitList li .noIcon{ width: 18%; position: absolute;}
ul.splitList li:nth-child(odd) .noIcon{ top: -9%; left: calc(50% - 9%);}
ul.splitList li:nth-child(even) .noIcon{ top: -9%; right: calc(50% - 9%);}
ul.splitList li .noIcon img{ width: 100%;}
ul.splitList li .txtArea{ width: 100%; padding: 6%; box-sizing: border-box; font-size: 3.3vw; font-weight: 600; line-height: 2; letter-spacing: 0.08em;}
ul.splitList li a{ color: #099f48; text-decoration: underline;}
ul.splitList li a:hover{ text-decoration: none;}
	
	
.fs90{ font-size: 90%;}
    
.pc{ display:none !important;}
.sp{ display:inherit !important;}
	
}

	
	
/**--- UTF-8化 ---**/
 p.heading-subtext,	
#mirai .newsArea .subTtl,
#mirai .contentsBox h3,
#mirai .youtubeTtl,
#mirai .release .subTtl,
#mirai .release h3.sixItems{
	text-align: center;
  position: relative;
	font-size:28pt;
	margin: 15px auto 25px;
	letter-spacing: 0.15em;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
}
	
@media screen and (max-width: 750px) {
p.heading-subtext,
#mirai .newsArea .subTtl,
#mirai .contentsBox h3,
#mirai .youtubeTtl,
	#mirai .release .subTtl,
#mirai .release h3.sixItems{
	text-align: center;
	font-size:20pt;
	margin: 0 auto 30px;
	letter-spacing: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
}
}

#mirai .youtubeTtl span{
	font-size:18pt;
	margin-bottom: 10px;
	display: block;
}
	
@media screen and (max-width: 750px) {
#mirai .youtubeTtl h3{
	font-size:14pt;
	display: block;
}
}

#mirai .release h3.sixItems{
	text-align: center;
  position: relative;
	font-size:20pt;
	margin: 15px auto 25px;
	letter-spacing: 0.15em;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
}
	
@media screen and (max-width: 750px) {
#mirai .release h3.sixItems{
	text-align: center;
	font-size:14pt;
	margin: 0 auto 30px;
	letter-spacing: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
}
}