@charset "utf-8";
/*--------------------------------------------

	 BASE

--------------------------------------------*/
html {
	font-size: 62.5%;
}
body {
	min-width:inherit;
    max-width: 1000px;
    margin: 0 auto;
    font-size: 4.4vw;
    font-weight: bold;
    width:100%;
	font-family:  "游ゴシック","YuGothic", "游ゴシック体","メイリオ", "Meiryo", "Arial", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#000;
	line-height:1;
}
#wrapper{
    width: 100%;
    position: relative;
    overflow: hidden;
}
#contents{
    overflow: hidden;
}
/*--------------------------------------------

	 DEFAULT SELECTER

--------------------------------------------*/
table {
	width:100%;
}
img{
	width:100%;
}
a {
	text-decoration:none;
	color:#000;
	display:inline-block;
	transition:0.7s;
}
/*--------------------------------------------

	GLOBAL CSS

--------------------------------------------*/
.cf:after {
	content: "";
	clear: both;
	display: block;
	height: 0;
}
.flex {
	display:flex;
}
.nolink {
	pointer-events: none;
}
.ggmap,
.youtube {
	position: relative;
	padding-bottom: 56.37%;
	/*padding-top: 10px;*/
	height: 0;
	overflow: hidden;
}
.ggmap iframe,
.ggmap #ggmap object,
.ggmap #ggmap embed,
.youtube iframe,
.youtube #ggmap object,
.youtube #ggmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media screen and (min-width : 999.9999px ){
	.for_sp{
		display:none !important;
	}
}
@media screen and (max-width : 1000px ) {
	.for_pc{
		display:none !important;
	}
}
/*--------------------------------------------

	共通　 CSS

--------------------------------------------*/
.secInner{
    max-width: 100%;
    padding:0 6.1%;
}
.ttlBox{
    margin-bottom: 11.2%;
}
.Sec-ttl-eng{
    margin: 0 auto;
}
.Sec-ttl-jpn{
    font-size: 0.79em;
    margin-top: 1em;
    text-align: center;
}
.line-qr-pc{
    width: 39.6%;
    margin: 0 auto;
}
.btn a{
    background-color: #971e33;
    padding: 6.8% 8% 6.8% 17%;
    display: flex;
    color: #fff;
    font-size: 0.72em;
    align-items: center;
}
.map-text{
    width: 45.7%;
    margin-right: 7.2%;
}
.pdf{
    position: relative;
}
.pdf:after{
    content: "";
    display: block;
    width: 40%;
    height: 100%;
    position: absolute;
    top: 50%;
    right: -38%;
    transform: translateY(-50%);
    background: url(../image/arrow.svg) no-repeat center top;
    background-size: contain;
}
/*--------------------------------------------

	drawer

--------------------------------------------*/
.drawer-hamburger{
    width: 3.4em;
    top: 0;
    padding:3.42% 5% 2.3%;
    font-size: 0.6em;
}
.drawer-hamburger:after {
    content: "MENU";
    display: block;
    position: absolute;
    left: 50%;
    bottom: -1.2em;
    transform: translateX(-50%);
    letter-spacing: -0.03em;
    color: #971e33;
}
.drawer-open .drawer-hamburger:after{
    display: none;
}
.drawer-hamburger-icon:before{
    top: -0.8em;
 }
.drawer-hamburger-icon:after{
    top: 0.8em;
}
.drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after{
    background-color: #971e33;
    height: 0.4em;
    width: 3.4em;
}
 .drawer-open .drawer-hamburger-icon{
    top: 0.5em;
}
.drawer--top .drawer-nav{
    transition: 0.7s;
    max-width: 1000px;
}
.drawer--top.drawer-open .drawer-nav {
    right: 50%;
    transform: translateX(50%);
}
.drawer-menu{
    padding: 0;
}
.drawer_logo {
    padding: 1em 2.2em;
    background-color: #e7e4d3;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;
}
.drawer_logo img{
    width: 9.8em;
}
.drawer_container{
    padding: 3em 2em 2.3em;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    background-color: #971e33;
    box-sizing: border-box;
}
.drawer-list{
    margin-bottom: 7.7%;
}
.drawer-menu li{
    border-bottom: 0;
}
.drawer-menu li:not(:first-child){
    padding-top: 1.56em;
}
.drawer-menu li a{
    position: relative;
    display: block;
	color:#fff;
    padding-left: 2.9%;
    padding-bottom: 3.2%;
    background: url("../image/dot.png") no-repeat center bottom;
    background-size: 100%;
    font-size: 1em;
}
.drawer-menu li a:after{
    content: "";
    display: block;
    width: 2.4%;
    height: 100%;
    position: absolute;
    top:50%;
    right: 2.66%;
    transform: translateY(-50%);
    background: url("../image/arrow.svg") no-repeat center top;
    background-size: contain;
}
.drawer-menu .close{
    width: 100%;
    background-color: #e7e4d3;
    padding: 4.6% 1.5%;
    text-align: center;
    margin-bottom: 7.2%;
}
.drawer-menu .close img{
    width: 26.6%;
    margin: 0 auto;
}
.drawer-menu .copy_logo{
    text-align: center;
    margin-bottom: 4.3%;
}
.drawer-menu .copy_logo img{
    width: 37.6%;
}
.dw-copy{
    font-size: 0.52em;
    text-align: center;
    line-height: 1.6;
}
/*--------------------------------------------

	HEADER

--------------------------------------------*/
#header{
    width: 100%;    
    background-color: #e7e4d3;
}
#header {
    max-width: 100%;
    margin: 0 auto;
    padding:  4% 5.3%;
    box-sizing: border-box;
}
#header .header-logo{
    width: 45%;
}
/*--------------------------------------------

	mainvisual

--------------------------------------------*/
#mv{
    background: url("../image/mainimage.jpg")no-repeat center top;
    background-size: cover;
    padding: 25% 0 44%;
    text-align: center;
}
#mv .secInner{
    padding: 0 8.8%;
}
.mv-ttl{
    margin-bottom:  28%;
}
/*--------------------------------------------

	qr

--------------------------------------------*/
#qr{
    text-align: center;
    position: relative;
    z-index: 11;
}
#qr .secInner{
    position: relative;
    z-index: 6;
}
.qr-Box{
    position: relative;
    background-color: #971e33;
    padding: 11.2% 0 10%;
    width: 100%;
}
.qr-Box:before{
    content: "";
    display: block;
    width: 120%;
    height: 50%;
    position: absolute;
    top:-11.7%;
    right: 50%;
    transform: translateX(50%);
    background-color: #971e33;
    border-radius: 56%;
    z-index: 1;
    
}
.qr-Box .line-qr,.qr-Box .line-qr-pc{
    margin:0 auto 6%;
}
.qr-entry{
    width: 67.7%;
    margin: 0 auto;
}
.qr-middle-Box{
    background-color: #e7e4d3;
    padding: 17% 0 18.5%;
}
.qr-middle-Box .Sec-ttl{
    width:80%;
    margin:0 auto 8%;
}
.qr-middle-Box .lead{
    color: #006835;
    line-height: 2.2;
}
.qr-bottom-Box{
    position: relative;
    background-color: #971e32;
    padding: 16% 0;
    color: #fff;
}
.qr-bottom-Box:before{
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top:-1.8em;
    right: 50%;
    transform: translateX(50%);
    border-style: solid;
    border-width: 0 2em 1.8em 2em;
    border-color: transparent transparent #971e32 transparent;
}
.qr-bottom-ttl{
    position: relative;
    font-size: 1.51em;
    display: inline-block;
    padding: 0 14px;
    margin-bottom: 6.1%;
}
.qr-bottom-ttl:before,.qr-bottom-ttl:after{
    content: "";
    display: block;
    width: 0.12em;
    height: 1.1em;
    position: absolute;
    bottom: 0;
    background-color: #fff;
}
.qr-bottom-ttl:before{
    left: 0;
    transform: rotate(-20deg);
}
.qr-bottom-ttl:after{
    right: 0;
    transform: rotate(20deg);
}
.qr-bottom-Box .imgBox{
    margin-bottom: 6.1%;
}
.qr-bottom-Box .lead{
    line-height: 2;
    text-align: left;
    margin-bottom: 11.2%;
}
.appBox{
    justify-content: space-between;
}
.appBox .left,.appBox .right{
    width:48%; 
}
.app-lead{
    font-size: 0.66em;
    margin-bottom: 5.1%;
}
/*--------------------------------------------

	story

--------------------------------------------*/
#story{
    padding: 17.5% 0 16%;
    background-color: #e7e4d3;
}
#story .Sec-ttl-eng{
    width: 50%;
}
#story .Sec-ttl-jpn{
    color: #971e33;
}
#story .lead{
    line-height: 2.15;
}
#story .lead:not(:last-child){
    margin-bottom: 1.6em;
}
/*--------------------------------------------

	map

--------------------------------------------*/
#map{
    padding: 18.2% 0 16.5%;
    background-color: #006835;
}
#map .Sec-ttl-eng{
    width: 35.2%;
}
#map .Sec-ttl-jpn{
    color: #e7e4d3;
}
#map .imgBox{
    width: 98%;
    padding: 0 1%;
    margin-bottom: 6.9%;
    text-align: center;
}
/*--------------------------------------------

	point

--------------------------------------------*/
#point{
    padding: 19% 0 15.3%;
    background-color: #1c3d72;
    color: #e7e4d3;
}
#point .Sec-ttl-eng{
    width: 45.2%;
}
.point-item:not(:last-child){
    margin-bottom: 11.4%;
}
.point-number{
    width: 34.6%;
    margin: 0 auto 3.5%;
}
.point-ttl{
    width: 90%;
    margin: 0 auto 4.9%;
}
#point .imgBox{
    margin-bottom: 4.4%;
}
#point .lead{
    line-height: 2.15;
}
/*--------------------------------------------

	howto

--------------------------------------------*/
#howto{
    padding: 18.6% 0;
    background-color: #006835;
}
#howto .ttlBox{
    margin-bottom: 18.9%;
}
#howto .Sec-ttl-eng{
    width: 58.2%;
}
#howto .Sec-ttl-jpn{
    color: #e7e4d3;
}
.howto-list{
    margin-bottom: 24.1%;
}
.howto-item{
    color: #006835;
    background-color: #fff;
    border: 0.34em solid #e7e4d3;
    border-radius: 1rem;
    text-align: center;
    padding:0 4.4% 8.4%;
    box-sizing: border-box;
}
.howto-item:not(:last-child){
    margin-bottom: 14.9%;
}
.step-number{
    width: 57.6%;
    margin: -6.4% auto 16.2%;
}
.step02 .step-number{
    margin-bottom: 5.7%;
}
.step03 .step-number{
    margin-bottom: 9.5%;
}
.step04 .step-number{
    margin-bottom: 7.4%;
}
#howto .imgBox{
    width: 62.6%;
    margin: 0 auto;
}
#howto  .step01 .imgBox{
    width: 100%;
    margin:0 auto 11.9%;
}
#howto .step02 .imgBox{
    margin-bottom: 4.5%
}
#howto .step03 .imgBox{
    margin-bottom:10.4%
}
#howto .step04 .imgBox{
    margin-bottom: 5.9%
}
#howto .lead{
    line-height: 1.7;
}
#howto .flow .ttlBox{
    margin-bottom: 7.4%;
}
.flow .Sec-ttl{
    width: 68.5%;
    margin: 0 auto 3.8%;
}
.flow .Sec-ttl-jpn{
    font-size: 0.8em;
    margin-bottom: 8.3%;
}
.flow .line-qr{
    text-align: center;
}
.flow-item{
    color: #e7e4d3;
    font-size: 0.78em;
    line-height: 2.15;
}
.flow-item:not(:last-child){
    margin-bottom: 1.52em;
}
/*--------------------------------------------

	howto

--------------------------------------------*/
#infomation{
    padding: 20.6% 0 18.3%;
    background-color: #1c3d72;
    color: #e7e4d3;
}
#infomation .ttlBox{
    margin-bottom: 13.1%;
}
#infomation .Sec-ttl-eng{
    width: 38.2%;
}
.info-item:not(:last-child){
    margin-bottom:0.6em;
}
.info-item-ttl{
    margin-bottom: 0.6em;
}
.info-item-lead{
    padding-left: 1em;
    font-weight: normal;
    line-height: 2.15;
}
/*--------------------------------------------

	mission

--------------------------------------------*/
#mission{
    padding: 20% 0;
    background-color: #e7e4d3;
}
#mission .ttlBox{
    margin-bottom: 14.3%;
}
#mission .Sec-ttl-eng{
    width: 66.2%;
}
#mission .Sec-ttl-jpn{
    color: #971e33;
}
#mission .greenbtn a{
    background-color: #006835;
}
#mission .bluebtn a{
    background-color: #1c3d72;
}
.mission-list .btn:not(:last-child){
    margin-bottom: 5.47%;    
}
/*--------------------------------------------

	notes

--------------------------------------------*/
#notes{
    padding: 20% 0 12.6%;
    background-color: #971e33;
    color: #e7e4d3;
}
#notes .notes-wrap .ttlBox{
    margin-bottom: 8.2%;
}
#notes .notes-wrap .Sec-ttl{
    width: 43.2%;
    margin: 0 auto;
}
.notes-list{
    margin-bottom: 19.4%;
}
.note-item{
    position: relative;
    margin-bottom: 2.8%;
    line-height: 2.2;
    padding-left: 1em;
    text-indent: -1em;
}
#notes .qa-wrap .ttlBox{
    margin-bottom: 2.5em;
}
#notes .qa-wrap .Sec-ttl{
    width: 65%;
    margin: 0 auto;
}
.qa-item:not(:last-child){
    margin-bottom:2.16em;
    padding-left: .5em;
}
.qa-item .label{
    padding-left: 1em;
    text-indent: -1em;
    line-height: 2;
}
.qa-item .field{
    line-height: 2;
    padding-left: 1em;
    text-indent: -1em;
}
/*--------------------------------------------

	footer

--------------------------------------------*/
#footer{
    padding: 17.4% 0;
    background-color: #e7e4d3;
    color: #000000;
    text-align: center;
}
.ft-banner{
    width: 90%;
    margin: 0 auto 3em;
}
.ft-logo{
    width: 65.4%;
    margin: 0 auto 7.6%;
}
.organizer{
    font-size: 0.78em;
    margin-bottom: 3%;
}
.organizer-contens{
    font-size: 0.6em;
}
#footer .copy{
    margin-top: 9.4%;
    font-size: 0.6em;
    line-height: 1.65;
}
@media screen and (min-width : 1000px ){
    body{
        font-size: 24px;
    }
    .btn a{
        font-size: 24px;
    }
}