@charset "utf-8";

html{
margin: 0px;
padding: 0px;
}

@media screen and ( max-width:479px ){
html{
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

body{
background-image: url("../../images/background/bg01.png");
background-repeat: no-repeat;
background-size:cover;
margin:0px auto;
background-position:center;
padding:0px;
font-family:'Roboto','Hiragino Sans','Meiryo','Hiragino Kaku Gothic ProN',sans-serif;
min-width: 1000px;
}

@media screen and ( max-width:479px ){
body{
background-image: none;
margin:0px;
padding: 0px;
font-family:'Roboto','Hiragino Sans','Meiryo','Hiragino Kaku Gothic ProN',sans-serif;
overflow-x: hidden;
min-width: auto;
}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#header{
width:100%;
height: auto;
margin: 0px auto;
padding: 0px;
}


@media screen and ( max-width:479px ){
#header{
width:100%;
height: auto;
margin: 0px auto;
padding: 0px;
}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#header div.logo_back{
width: 100%;
height:170px;
background-image: url("../../images/header/logo/logo_back.jpg");
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
padding: 0px;
}


#header div.logo_back img{
display:block;
width: 1000px;
height:170px;
margin: 0px auto;
padding: 0px;
}

@media screen and ( max-width:479px ){
#header div.logo_back{
width: 100%;
height:auto;
background-image: url("../../images/header/logo/logo_back.jpg");
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
padding: 0px;
}
}

@media screen and ( max-width:479px ){
#header div.logo_back img{
display:block;
width:100%;
height:auto;
margin: 0px auto;
padding: 0px;
}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */


#container{
width:1000px;
margin:0px auto 0px auto;
padding:0px;
background-color: rgba(255,255,255,0.6);
box-sizing: border-box;
}

@media screen and ( max-width:479px ){
#container{
max-width:100%;
margin: 0px auto -10px auto;
padding:0px;
}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

div.navi_root{
display: flex;
width: 960px;
margin: 5px auto 20px auto;
flex-direction:row;
flex-wrap: nowrap;
justify-content:flex-start;
align-items:flex-start;
}


@media screen and ( max-width:479px ) {
div.navi_root{
display: flex;
max-width:100%;
margin: 5px auto 20px auto;
flex-direction:row;
flex-wrap:wrap;
justify-content:flex-start;
align-items:flex-start;
}
}

div.navi_root span{
flex-basis: auto;
align-self: auto;
font-size:14px;
margin: 0px 10px 0px 10px;
}

div.navi_root span a:link{
color:#333333;
}

div.navi_root span a:visited{
color:#333333;
}

div.navi_root span a:hover{
font-weight:600;
color:#DB477E;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */


div.wrap div.clear{
clear: both;
}

@media screen and ( max-width:479px ){
div.wrap div.clear{
clear: both;
}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

div.wrap{
width:1000px;
margin: 0px auto;
padding: 0px;
padding-bottom: 100px;
box-sizing: border-box;
background-color: rgba(255,255,255,0.6);
}

@media screen and ( max-width:479px ){
div.wrap{
width:100%;
margin: 0px auto;
padding: 0px;
vertical-align: top;
}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */


div.wrap div.introduction{
width: 1000px;
margin: 30px auto 0px auto;
padding: 0px;
}

@media screen and ( max-width:479px ){
div.wrap div.introduction{
width:100%;
margin: 30px auto 0px auto;
padding: 0px;
}
}

div.wrap div.introduction img.img_pc{
display: block;
width: 1000px;
margin: 0px auto;
padding: 0px;
}


@media screen and ( max-width:479px ){
div.wrap div.introduction img.img_pc{
display: none;
}
}


div.wrap div.introduction img.img_sp{
display: none;
}


@media screen and ( max-width:479px ){
div.wrap div.introduction img.img_sp{
display: block;
max-width: 100%;
margin: 0px auto;
padding: 0px;
}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */


div.wrap span.bold{
font-weight:bold;
}

div.wrap span.red_bold{
font-weight:bold;
color:rgba(212,23,26,1.00);
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */


div.wrap a:link{
color:#1C70E1;
}

div.wrap a:visited{
color:#1C70E1;
}

div.wrap a:hover{
color:#DB477E;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */


div.wrap h1{
width: 940px;
box-sizing: border-box;
background-color:rgba(255,138,0,1.00);
margin:30px auto 20px auto;
padding:5px;
padding-left: 20px;
border-radius: 50px;
font-size:24px;
color:rgba(255,255,255,1.00);
}


@media screen and ( max-width:479px ){
div.wrap h1{
width:100%;
box-sizing: border-box;
background-color:rgba(255,138,0,1.00);
margin:30px auto 10px auto;
padding: 0px;
padding-left: 10px;
border-radius: 50px;
}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */


div.wrap h2{
width: 920px;
box-sizing: border-box;
border:solid rgba(255,138,0,1.00) 2px;
background-color:rgba(255,251,225,0.7);
margin:50px auto 20px auto;
padding: 3px;
padding-left: 20px;
text-align:left;
border-radius: 50px;
color: rgba(255,138,0,1.00);
font-size:22px;
}

@media screen and ( max-width:479px ){
div.wrap h2{
width:96%;
box-sizing: border-box;
border:solid rgba(255,138,0,1.00) 2px;
background-color:rgba(255,251,225,0.7);
margin:50px auto 20px auto;
padding: 5px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
border-radius: 50px;
color: rgba(255,138,0,1.00);
font-size:17px;
line-height:13pt;
}
}


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

div.wrap p.topix_box{
width: 920px;
margin: 20px auto;
padding:0px;
box-sizing: border-box;
border-radius:10px;
color:rgba(0,0,0,1.00);
font-weight:bold;
font-size:28px;
line-height: 30pt;
}


@media screen and ( max-width:479px ){
div.wrap p.topix_box{
width:100%;
margin: 0px auto;
padding:5px;
box-sizing: border-box;
border-radius:10px;
color:rgba(0,0,0,1.00);
font-weight:bold;
font-size:24px;
line-height:28pt;
}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

div.wrap p{
width:880px;
margin:20px auto 10px auto;
color:#555125;
font-size:20px;
font-weight:400;
text-align:left;
line-height:22pt;
}

@media screen and ( max-width:479px ){
div.wrap p{
max-width:94%;
padding: 0px;
margin:10px auto;
color:#555125;
font-size:17px;
font-weight:400;
text-align:left;
line-height:19pt;
}
}


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

div.wrap ul.kome{
width:850px;
margin:0px auto 20px auto;
padding: 0px;
box-sizing: border-box;
}

@media screen and ( max-width:479px ){
div.wrap ul.kome{
max-width:98%;
margin: 5px auto 5px 10px;
padding: 0px;
}
}

div.wrap ul.kome li{
margin-bottom:5px;
list-style-type: none;
font-weight:400;
font-size: 18px;
text-align: left;
color:#555125;
}

@media screen and ( max-width:479px ){
div.wrap ul.kome li{
margin-bottom: 10px;
font-weight:400;
font-size: 15px;
text-align: left;
color:#555125;
}
}

div.wrap ul.kome li:before{
content: "※";
margin-right: 5px;
}

div.wrap ul.kome li span{
display: inline-block;
width:820px;
vertical-align: top;
}

@media screen and ( max-width:479px ){
div.wrap ul.kome li span{
display: inline-block;
width: 90%;
vertical-align: top;
}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

div.wrap ul.link{
width:850px;
margin:0px auto 20px auto;
padding: 0px;
box-sizing: border-box;
}

@media screen and ( max-width:479px ){
div.wrap ul.link{
max-width:98%;
margin: 5px auto 5px 10px;
padding: 0px;
}
}

div.wrap ul.link li{
margin-bottom:10px;
list-style-type: none;
font-weight:400;
font-size: 18px;
text-align: left;
color:#555125;
}

@media screen and ( max-width:479px ){
div.wrap ul.link li{
margin-bottom: 10px;
font-weight:400;
font-size: 15px;
text-align: left;
color:#555125;
}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

div.wrap ol{
width:850px;
margin:0px auto 20px 90px;
padding: 0px;
box-sizing: border-box;
}

@media screen and ( max-width:479px ){
div.wrap ol{
max-width:90%;
margin: 5px auto 5px 30px;
padding: 0px;
}
}

div.wrap ol li{
margin-bottom:10px;
list-style-type: decimal;
text-align: left;
color:#555125;
font-size: 18px;
}

@media screen and ( max-width:479px ){
div.wrap ol li{
margin-bottom: 10px;
font-weight:400;
font-size: 16px;
text-align: left;
color:#555125;
}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

div.wrap div.step{
width: 900px;
display: flex;
margin: 10px auto;
padding: 0px;
flex-direction:row;
justify-content:center;
flex-wrap: wrap;
}

@media screen and ( max-width:479px ){
div.wrap div.step{
max-width:100%;
margin: 5px auto;
padding: 0px;
flex-direction:column;
justify-content:center;
flex-wrap: wrap;
}
}

div.wrap div.step div.item1{
flex-basis: 150px;
}

@media screen and ( max-width:479px ){
div.wrap div.step div.item1{
flex-basis:100%;
margin: 0px auto;
padding: 0px;
}
}

@media screen and ( max-width:479px ){
div.wrap div.step div.item1 img{
display: block;
}
}

div.wrap div.step div.item2{
flex-basis:740px;
font-weight:400;
font-size: 17px;
color:#555125;
text-align: left;
}

@media screen and ( max-width:479px ){
div.wrap div.step div.item2{
flex-basis:100%;
margin: 0px auto;
padding:10px;
font-weight:400;
font-size: 15px;
color:#555125;
text-align: left;
}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

div.wrap div.step2{
width:750px;
display: flex;
margin:-20px auto 30px auto;
padding: 0px;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
background-color: rgba(254,255,238,1.00);
}

@media screen and ( max-width:479px ){
div.wrap div.step2{
max-width:100%;
margin: 5px auto;
padding: 0px;
flex-direction:column;
justify-content:center;
flex-wrap: wrap;
background-color: rgba(254,255,238,1.00);
}
}

div.wrap div.step2 div.item3{
flex-basis: 130px;
}

@media screen and ( max-width:479px ){
div.wrap div.step2 div.item3{
flex-basis:100%;
margin: 0px auto;
padding: 0px;
}
}

@media screen and ( max-width:479px ){
div.wrap div.step2 div.item3 img{
width: 130px;
display: block;
margin: 0px auto
}
}

div.wrap div.step2 div.item4{
flex-basis:600px;
align-content: center;
font-weight:400;
font-size: 16px;
color:#555125;
text-align: left;
}

@media screen and ( max-width:479px ){
div.wrap div.step2 div.item4{
flex-basis:100%;
margin: 0px auto;
padding:10px;
font-weight:400;
font-size: 15px;
color:#555125;
text-align: left;
}
}

div.wrap div.step2 div.item4_1{
flex-basis:600px;
font-weight:400;
font-size: 16px;
color:#555125;
text-align: left;
}

@media screen and ( max-width:479px ){
div.wrap div.step2 div.item4_1{
flex-basis:100%;
margin: 0px auto;
padding:10px;
font-weight:400;
font-size: 15px;
color:#555125;
text-align: left;
}
}

div.wrap div.step2 div.item4 img.sankaku{
display: block;
margin: 0px auto;
}

@media screen and ( max-width:479px ){
div.wrap div.step2 div.item4 img.sankaku{
display: block;
margin: 0px auto;
}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

div.wrap div.step2 div.item4 ul.kome2{
width:580px;
margin:0px auto 10px auto;
padding: 0px;
box-sizing: border-box;
}

@media screen and ( max-width:479px ){
div.wrap div.step2 div.item4 ul.kome2{
width:98%;
margin: 0px auto;
padding:10px;
}
}

div.wrap div.step2 div.item4 ul.kome2 li{
margin-bottom:5px;
list-style-type: none;
font-weight:400;
font-size: 18px;
text-align: left;
color:#555125;
}

@media screen and ( max-width:479px ){
div.wrap div.step2 div.item4 ul.kome2 li{
margin-bottom: 10px;
text-align: left;
color:#555125;
font-weight:400;
font-size: 15px;
color:#555125;
text-align: left;
}
}

div.wrap div.step2 div.item4 ul.kome2 li:before{
content: "※";
margin-right: 5px;
}

div.wrap div.step2 div.item4 ul.kome2 li span{
display: inline-block;
width:500px;
font-weight:400;
font-size: 14px;
vertical-align: top;
}

@media screen and ( max-width:479px ){
div.wrap div.step2 div.item4 ul.kome2 li span{
display: inline-block;
width:92%;
vertical-align: top;
}
}


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

div.wrap div.enquet{
display: flex;
width: 800px;
margin:0px auto;
padding: 0px;
flex-direction: row;
justify-content: center;
align-items: center;
}


@media screen and ( max-width:479px ){
div.wrap div.enquet{
display: flex;
width:96%;
margin:0px auto;
padding: 0px;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
}

div.wrap div.enquet div.qr_code{
flex-basis: 150px;
margin-right: 10px;
}

@media screen and ( max-width:479px ){
div.wrap div.enquet div.qr_code{
flex-basis: 150px;
margin-right: 10px;
}
}

div.wrap div.enquet div.qr_text{
flex-basis:auto;
}

@media screen and ( max-width:479px ){
div.wrap div.enquet div.qr_text{
flex-basis:auto;
}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

div.wrap div.flyer{
width: 800px;
margin:80px auto;
padding: 0px;
}

@media screen and ( max-width:479px ){
div.wrap div.flyer{
width:100%;
margin: 0px auto;
padding: 0px;
}
}

div.wrap div.flyer img{
display: block;
border:solid rgba(191,191,191,1.00) 1px;
}

@media screen and ( max-width:479px ){
div.wrap div.flyer img{
width: 100%;
display: block;
}
}

div.wrap div.flyer img:hover{
opacity: 0.5;
}

div.wrap div.flyer span{
display: block;
width: 800px;
margin-top: 10px;
text-align: center;
}

@media screen and ( max-width:479px ){
div.wrap div.flyer span{
display: block;
width:100%;
text-align: center;
font-size: 17px;
margin-top: 5px;
}
}


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#pageTop {
position: fixed;
bottom: 0px;
right:30px;
box-sizing: border-box;
}

#pageTop a {
display: block;
z-index:999;
width:80px;
height:80px;
border-radius: 50%;
background-color:rgba(14,174,176,1.00);
text-align: center;
text-decoration: none;
}

#pageTop a span.text_top{
display: block;
padding-top:20px;
color: #fff;
font-size:14px;
font-weight:bold;
line-height: 12pt;
}

#pageTop a span.text_top::before {
content: "";
display: block;
width: 10px;
height: 10px;
margin-left: 30px;
margin-right: 30px;
border-top: 5px solid white;
border-right: 5px solid white;
transform: rotate(-45deg);
}

#pageTop a:hover {
text-decoration: none;
opacity: 0.5;
}

