@charset "UTF-8";

@font-face {
 font-family: "MyYuGothicM";
 font-weight: normal;
 src: local("YuGothic-Medium"),
 local("Yu Gothic Medium"),
 local("YuGothic-Regular");
}
@font-face {
 font-family: "MyYuGothicM";
 font-weight: bold;
 src: local("YuGothic-Bold"),
 local("Yu Gothic");
}
/*********************************************
reset
**********************************************/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
address, caption, cite, code, dfn, em, th, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; list-style-position: outside; }
caption, th { text-align: left; }
q:before, q:after { content: ''; }
img { vertical-align: bottom; }
figure { margin: 0; }
html { height: 100%; }
em { font-weight: bold; }
/* IE6/7/8用　html5リセット */
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }
/*table firefox対応 IE対応でcellspacing="0"を付与すること*/
table { border-collapse: separate; border-spacing: 0; }
/* border-bo x*/
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;font-feature-settings: "palt";  }
/*********************************************
basic
**********************************************/
/* text */
strong { font-weight: bold; }
i { font-style: italic; }
/* link */
a { text-decoration: underline; color: #d00; }
a:visited { text-decoration: underline; color: #d00; }
a:active { text-decoration: underline; color: #f33; }
a:hover { text-decoration: underline; color: #f33; }
input[type="submit"]:hover { cursor: pointer; }
a img:hover { filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; }
a img { -moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear;-webkit-backface-visibility: hidden;backface-visibility: hidden; }
/* float */
.f-left { float: left; }
.f-right { float: right; margin-left: 20px; }
.hidden { overflow: hidden; }
.clear { clear: both; }
.clearfix { overflow: hidden; *zoom:1;}
.clearfix:after { clear: both; display: block; content: " "; }
/* margin,padding */
.m0auto{margin:0 auto !important;}
.mt0 { margin-top: 0 !important }
.mb40 { margin-bottom: 40px !important }
/* text-align */
.t-center { text-align: center !important; }
.t-right { text-align: right !important; }
.t-left { text-align: left !important; }
/* form */
input, select { font-size:14px; }
input[type="button"], input[type="submit"] { -webkit-appearance: none; }
label { }
legend { margin-bottom: 1em; }
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="date"],
input[type="datetime"],
select, textarea { border: #ccc 1px solid; padding: 4px;}
input[type="checkbox"] { margin-right: 1em; }

/*********************************************
back to top
**********************************************/
.pagetop { display: inline-block; height: 50px; width: 50px; position: fixed; bottom: 40px; right: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* image replacement properties */ overflow: hidden; text-indent: 100%; white-space: nowrap; background: rgba(13, 113, 187, 0.8) url(../img/cd-top-arrow.svg) no-repeat center 50%; visibility: hidden; opacity: 0; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; }
.pagetop.cd-is-visible, .pagetop.cd-fade-out, .no-touch .pagetop:hover { -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; }
.pagetop.cd-is-visible { /* the button becomes visible */ visibility: visible; opacity: 1; }
.pagetop.cd-fade-out { /* if the user keeps scrolling down, the button is out of focus and becomes less visible */ opacity: .5; }
.no-touch .pagetop:hover { background-color: #0d71bb; opacity: 1; }

/*********************************************
content
**********************************************/
/* font-size */
body { font-size: 14px;
font-family:-apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", MyYuGothicM, Meiryo,sans-serif;letter-spacing:0.1em;background:url(../img/bg.jpg) center center repeat #fcfcfc;}
.fs16 { font-size: 16px; }
.fs12 { font-size: 12px; }
.red { color: #d00; }
.fit{width:100%;height:auto;}
/*----- header -----*/
header { width:80%;max-width:332px;margin: 31px auto 24px; }
header img{width:100%;height:auto;}
/*----- layout -----*/
#main_contents { max-width: 480px;width:90%;margin:0 auto;}

#mv #main_contents { max-width: 852px;}
#main_contents .box{background:#fff;}

.top_figure_01{margin:0 0 32px;}

#top_box_01{line-height:1.57em;text-align:center;padding:24px 16px;margin:0 0 26px;}
#top_box_01 p{margin:0 0 1.57em;}
#top_box_01 p:last-child{margin:0;}
#top_box_01 .txt_01 {color:#2d787f;font-size:12px;}
#top_box_01 .txt_02 {font-size:12px;}
#top_box_02{padding:30px 30px 35px;text-align:center;}
#top_box_02 input[type="text"]{width:100%;letter-spacing:0.2em;border:#999 1px solid;border-radius:0;height:50px;text-align:center;}
#top_box_02 input[type="submit"]{border:none;background:#83ccd3;border-bottom:1px solid #6cbac1;color:#022b2f;letter-spacing:0.4em;width:240px;height:40px;}
#top_box_02 #alert{color:#c00;font-size:12px;letter-spacing:0.1em;margin:10px 0;}
#top_box_02 .txt_02{margin:20px 0 0;}
#top_box_02 #alert + .txt_02{magrin:0;}

#mv_box_01 {margin:0 0 35px;}
#mv_box_01 iframe{display:block;}


#mv_box_01 .video { position: relative; width: 100%; padding-top: 55.5%; margin: 0; }
#mv_box_01 .video iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }

#mv_box_01 .headline{font-size:16px;font-weight:bold;padding:13px 8px;text-align:center;}
#mv_box_02 {padding:20px 24px;}
#mv_box_02 .headline{font-weight:bold;text-align:center;margin:0 0 14px;}
#mv_box_02 ul{font-size:12px}
#mv_box_02 li{margin:0 0 3px;}

#close_box_01{padding:20px 4%;font-weight:bold;text-align:center;}
input::-webkit-input-placeholder {
    color: #aaa;
    font-weight: normal;
}
input:-ms-input-placeholder {
    color: #aaa;
    font-weight: normal;
}
input::-moz-placeholder {
    color: #aaa;
    font-weight: normal;
}


/*----- content -----*/
#main_contents hr { height: 1px; border: none; border-top: 1px #ccc solid margin:1.45em 0;}
/*----- side -----*/

/*----- footer -----*/
footer { width:90%;max-width: 480px; margin: 50px auto 30px;border-top:#cacaca 1px solid;padding:30px 0 0; }
footer li{float:right;max-width:230px;width:48%;}
footer li:first-child{float:left;}
#copy { margin:45px 0 0;text-align: center;font-size:11px; }

@media screen and (max-width: 480px) {
body{font-size:13px;}
#top_box_01 .txt {text-align:left;}
#top_box_01 .txt br{display:none;}
#top_box_01 .txt_01{display:block}
#mv_box_01 .headline{font-size:14px;}
#top_box_02{padding:20px 16px 20px;text-align:center;}
#top_box_02 input[type="text"]{letter-spacing:0.1em;height:40px;text-align:center;}

#mv_box_01 .headline{font-size:14px;padding:10px 8px;}
#close_box_01{text-align:left;}
footer{margin: 40px auto 24px;padding:20px 0 0;}
#copy { margin:24px 0 0;}

input::-webkit-input-placeholder {
		font-size:12px;
}
input:-ms-input-placeholder {
		font-size:12px;
}
input::-moz-placeholder {
		font-size:12px;
}
}