@charset "utf-8";
/*----*/
:root{
	--font-size:15px;
	--max-width:600px;
	--color: #5b5b5b;
	--color-link: #f06e00;
    --color-link-hover: #f06e00;
	--background: #f06e00;
}


@media screen and (max-width: 768px){
	:root{
        --font-size:12px;
    }
}


/*----*/
/*-----------
reset
-----------*/
* {margin: 0;padding: 0; box-sizing: border-box;}

.cf { zoom: 1; }
.cf:before,.cf:after { content: ""; display: table;}
.cf:after { clear: both;}
:focus-visible{border: none;outline:none}
li{list-style: none;}
/*-----------
body
-----------*/
body{color: var(--color);font-family: "メイリオ",Meiryo, Arial, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", osaka, sans-serif;font-optical-sizing: auto;
font-style: normal; font-weight: 500;background: var(--background); padding: 20px 0;}

img{height: auto;}

@media screen and (max-width: 800px){
	body{width: 100%;}
	img{width: 100%;}
}

@media screen and (max-width: 768px){
	/* body{font-size: 20px;} */
}

/*-----------
commone
-----------*/
article{width: 100%; max-width: var(--max-width);overflow: hidden;background: #fff;margin: 0 auto; padding: 20px 2em 50px;}
a{color: var(--color-link);text-decoration: none; margin-bottom: 20px; }
a:hover{text-decoration: underline;}
a:hover img{filter:alpha(opacity=1); -moz-opacity: 1; opacity: 1;}
a.nolink{pointer-events: none;cursor: default;}

/*flex box*/
.flex{display: flex; align-items: flex-start; flex-wrap: wrap;}
.flex img{align-items: flex-start;}
.mleft{margin-left: auto;}
.mright{margin-right: auto;}
.mtop{margin-top: auto;}
.mbottom{margin-bottom: auto;}
.spacer {width: 100%; display: block;}

/*SP-on*/
.pc{display: block;}
.sp{display: none;}

@media screen and (max-width: 768px){
    .pc{display: none;}
    .sp{display: block;}
}


/*btn*/
a.btn{display: block; background: var(--color2);color: #fff; padding: .8em 2em .8em 1em; text-align: center; position: relative; max-width: 500px; width: 80%; margin: 0 auto; font-weight: 500; text-decoration: none;border: var(--color2) 1px solid; border-radius: 100px; font-size: 1.2em;}
a.btn::after{content: "";position: absolute; top: calc(50% - 3px); right: 1.5em;width: 0;height: 0;border-style: solid;border-top: 6px solid transparent;border-bottom: 6px solid transparent;border-left: 12px solid #ffffff;border-right: 0;}
a.btn:hover{ color: var(--color2); background:#fff; transition: all 0.2s linear;}
a.btn:hover::after{border-color:transparent transparent transparent var(--color2);}


/*-----------
form
-----------*/
h1{line-height: 1; width: 80%; margin: 0 auto;}

h5{margin-top: 1em;}
.txt_form{margin-top: 1em; font-size: .8em;}
button{border: none; padding:.5em 1em;max-width: 300px; margin: 1.5em auto 0; width: 80%; display: block; background: #f06e00; color: #fff;border-radius: 5px;border: 1px solid #f06e00;cursor:pointer;}
button:hover{cursor:pointer; color: #f06e00; background: #fff;}
ul{font-size: 0.8em; margin-left: 2em;margin-top: 2em;}
li{margin-left: -1em;margin-top: .5em;}
li::before{content: "※"; margin-left: -1em;}
hr{border-width: 1px 0 0 0; margin-top: 1em;}

input,textarea{padding: 0.5em;}
input:focus,
textarea:focus{border: 2px solid #f06e00;}
.line-2{width: 80%; }

.form_text{font-size: .8em;}

.thanks_wrap h1{ width: 170px; text-align: center; display: block; margin: 0 auto; color: #f06e00;}
.thanks_wrap h1 img{width: 80%;}
.thanks_wrap p{margin-top: 1em; font-size: .9em;}
.thanks_wrap p:first-of-type{margin-top: 2em;}

footer p{font-size: .8em; text-align: center; margin-top: 2em;}

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

}

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


}