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


/*==============================================
   // リセット＆タグ設定
==============================================*/
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display:block;
}
body,div,dl,dt,dd,ul,li,ol,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,
blockquote,th,td,article,aside,details,figcaption,footer,header,hgroup,menu,nav,section,summary {
	margin:0;
	padding:0;
	line-height:1.5;
}
li,ol {
	list-style-type:none;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
}
caption,th {
	text-align:left;
}
q::before,q::after {
	content: '';
}
hr,legend {
	display:none;
}
img,abbr,acronym,fieldset {
	border:0;
}
html {
	overflow-y:scroll;
	font-size:10px; /* 基準サイズ（IE8以下を除き,これは全体に影響する） */
}
h1 { font-size:3.2rem; font-weight:bold; margin:0.8em 0 0.2em; }
h2 { font-size:2.6rem; font-weight:bold; margin:0.8em 0 0.2em; }
h3 { font-size:2.4rem; font-weight:bold; margin:0.8em 0 0.2em; }
h4 { font-size:2.0rem; font-weight:bold; margin:0.8em 0 0.2em; }
h5 { font-size:1.8rem; font-weight:bold; margin:0.8em 0 0.2em; }
h6 { font-size:1.6rem; font-weight:bold; margin:0.8em 0 0.2em; }

table {
	font-size:inherit;
	table-layout:fixed;
	border-collapse:collapse;
	border-spacing:0;
}
table th {
	background-color:#ddd;
	padding:1px;
	border:1px solid #888;
	text-align:center;
}
table td {
	border:1px solid #aaa;
	padding:1px;
}
pre,code,kbd,samp,tt {
	font-family:monospace;
	line-height:1.1;
}
select,input,button,textarea {
	font:99% arial,helvetica,clean,sans-serif;
}
body {
	width: 100%;
	height: 100%;
	font-family:"メイリオ", Meiryo, verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	font-size:1.4rem;
	color:#323232;
	-webkit-text-size-adjust:100%;  /* スマートフォンの表示崩れ対策 */
	position:relative;
}
a {
	text-decoration:none;
	overflow:hidden;
	color:#323232;
}
a:hover {
	opacity:0.75;
}
header,footer {
	text-align:center;
}

/*--------------------------------------------
	///// Base
--------------------------------------------*/
#wrapper{
	min-width: 960px;	
	margin: 0 auto;
}
.cont{
	width: 960px;
	margin: 0 auto;
}
.narrow_cont{
	width: 840px;
	margin: 0 auto;
}
.asterisk{
	font-size: 1.2rem;
	text-align: left;
}
section{
	padding: 80px 0 100px;
	text-align: center;
}
.gray_bg{
	background: #ebebeb;
}
.sh_btn{
	display: flex;
}
button{
	font-size: 1.8rem;
	font-weight: bold;
	padding: 6px 36px;
	border: 2px #D50C24 solid;
	border-radius: 4px;
	color: #323232;
}
button:hover{
	opacity: 0.7;
	cursor: pointer;
}
.sh_btn button:first-child{
	color: #D50C24;
	background-color: transparent;
}
.sh_btn button:last-child{
	color: #FFF;
	background-color: #D50C24;
	margin-left: 16px;
}
.after_btn{
	position: relative;
	margin-top: 36px;
}
.after_btn::after{
	content: "＞";
	position: absolute;
	right: 8px;
}
/*--------------------------------------------
	///// Header
--------------------------------------------*/
.top_logo{
	text-indent: -9999px;
}
header .cont .top_logo{
	background: url(/images/logo_sh1.svg)no-repeat center;
	width: 220px;
}
header > .cont{
	display: flex;justify-content: space-between;
	padding: 40px 0 24px;
}
header .after_btn{
	margin-top: 0;
}
#top_img{
	background: url(/images/top_img.png) no-repeat center;
	background-color: #edeaf6;
	height: 674px;
}
#top_img .cont{
	position: relative;
}
#top_img > p:first-child{
	font-size: 3.6rem;
	padding: 64px 0 20px;
}
#top_img h1{
	background: url(/images/logo_sh2.svg)no-repeat center;
	background-size: 278px 105px;
	margin: 0;
	height: 106px;
}
#white_box{
	background-color: #FFF;
	background: rgba(255,255,255,0.5);
	padding: 24px 40px;
	width: 500px;
	position: absolute;
	top:70px;
	right: 72px;
}
#white_box p{
	font-size: 1.8rem;
	text-align: left;
	line-height: 1.6;
}
#top_img .cont .asterisk{
	position: absolute;
	top: 246px;
	right: 72px;
}
/*--------------------------------------------
	///// 各section
--------------------------------------------*/
#main_nav{
	display: none;
}
section h2{
	font-size: 3.0rem;
	font-weight: normal;
	margin: 0 0 60px;
}
section h2 span{
	color: #D50C24;
}
section p{
	font-size: 1.6rem;
}
#news li{
	font-size: 1.6rem;
	margin: 0 auto;
	padding: 8px 16px;
	border-bottom: 1px #C8C8C8 solid;
	text-align: left;
}
#news li span{
	font-weight: bold;
	padding-right: 8px;
}
#howto ul{
	display: flex;
	flex-wrap: wrap;
}
#howto li:nth-child(odd){
	margin-right: 36px;
}
#howto h3{
	font-size: 2.4rem;
	text-align: center;
}
#howto h3::before{
	content: "";
	display: inline-block;/*忘れずに！*/
	width: 35px;/*画像の幅*/
	height: 35px;/*画像の高さ*/
	background-image: url(/images/checkbox.png);
	vertical-align: -6px;
	margin-right: 8px;
}
#howto li p{
	font-size: 1.6rem;
	text-align: left;
	width: 412px;
	margin: 0 auto;
	padding-bottom: 60px;
}
#howto{
	padding-bottom: 60px;
}
#use ul{
	display: flex;
	justify-content: space-between;
}
#use h3{
	font-size: 2.4rem;
}
#use h3 span{
	display: inline-block;
	background-color: #D50C24;
	width: 32px;
	height: 32px;
	border-radius: 5px;
	color: #FFF;
	font-size: 2.0rem;
	vertical-align: 2px;
	line-height: 34px;
	margin: 0 8px 0 0;
}
#use li img{
	margin: 12px 0 20px;
}
#use li p{
	width: 280px;
	text-align: left;
	margin: 0 auto;
}
#use div{
	padding: 60px 0 0;
}
#use div p{
	font-size: 2.0rem;
	margin: 40px 0 0;
}
#use button{
	font-size: 1.8rem;
	padding: 6px 18px;
	border: 2px #323232 solid;
	border-radius: 4px;
	background: #FFF;
	width: 240px;
	height: 60px;
}
#start{
	background: url(/images/start_img.png)no-repeat;
	background-size: cover;
	height: 640px;
}
#start h2{
	margin-bottom: 40px;
	padding-top: 68px;
}
#start .cont p{
	width: 560px;
	text-align: left;
	margin: 0 auto;
	padding-bottom: 90px;
	line-height: 1.8;
	font-size: 1.8rem;
}
#start .sh_btn{
	justify-content: center;
}
#start button{
	margin: 0 20px;
	padding: 6px 18px;
	width: 320px;
	height: 68px;
	font-size: 2.6rem;
	border: 4px #D50C24 solid;
	border-radius: 6px;
}
#download{
	padding: 40px 0 0;
	display: flex;
	justify-content: center;
	text-align: left;
}
#download div{
	margin: 52px 52px 0;
	padding: 0 20px;
	width: 500px;
}
#download button{
	border: none;
	background: transparent;
	padding: 0;
}
#download h3{
	font-size: 2.8rem;
	font-weight: normal;
	padding-left: 8px;
	margin: 0 0 20px;
}
#download div p{
	position: relative;
	padding-left: 152px;
}
#download div p::before{
	content: "";
	display: inline-block;/*忘れずに！*/
	width: 128px;
	height: 128px;
	background: url(/images/icon_ijishin.png) no-repeat;
	background-size: 128px auto;
	position: absolute;
	top:-4px;
	left: 0px;
}
#download div button{
	margin-left: 152px;
	margin-top: 8px;
}

/*--------------------------------------------
	///// アンケートページ
--------------------------------------------*/
#enq_top,#inquiry_top{
	padding: 60px 0 40px;
}
#enq_top h1,#inquiry_top h1{
	background: url(/images/logo_sh2.svg)no-repeat center;
	background-size: 200px 75px;
	margin: 0;
	height: 75px;
	text-indent: -9999px;
}
#enq_cont,#inquiry_cont{
	padding: 60px 0;
}
#enq_cont h2,#inquiry_cont h2{
	font-size: 2.4rem;
	margin: 0;
}
#enq_cont .cont > p{
	font-size: 3.2rem;
	padding: 48px 0 0;
}
#enq_cont #question{
	display: flex;
	justify-content: space-between;
	margin: 40px 0 120px;
	padding: 0;
}
#enq_cont #question section{
	padding: 0;
	position: relative;
	width: 320px;
}
#enq_cont #question h3{
	font-size: 1.8rem;
	text-align: left;
}
#enq_cont #question select{
	font-size: 1.6rem;
	color: #323232;
	padding: 12px 10px 16px;
	border: #FFF 0px solid;
	position: absolute;
	left: 0px;
	width: 280px;
}
#scroll_box{
	overflow-y: scroll;
	margin: 0 auto;
    padding: 32px 52px 40px;
	width: 860px;
    height: 520px;
    border: 1px solid #c8c8c8;
    background-color: #FFF;
}
#scroll_box section{
	text-align: left;
	padding: 0;
}
#scroll_box h2{
	font-size: 1.8rem;
	padding-bottom: 12px;
}
#scroll_box h3{
	font-size: 1.5rem;
	margin: 16px 0 2px;
}
#scroll_box h4{
	font-size: 1.5rem;
	margin: 16px 0 2px;
}
#scroll_box p{
	font-size: 1.4rem;
}
#scroll_box .asterisk{
	margin-top: 32px;
}
#enq_cont .sh_btn{
	padding: 80px 0 40px;
}
#enq_cont .sh_btn button{
	font-size: 2.8rem;
	margin: 0 auto;
	padding: 10px 52px;
}
#enq_footer div button{
	margin: 0 40px;
}
#enq_footer div:first-child{
	display: flex;
	justify-content: center;
	background-color: #323232;
	padding: 4px 0 0;
}
#enq_footer > div:first-child{
	padding: 16px 0;
}
#enq_footer h2{
	font-size: 1.8rem;
	font-weight: bold;
}
#enq_footer div button h2::before{
	background: none;
	background-size: auto;
	width: 0;
	height: 0;
}
#enq_footer div button:first-child h2::before{
	content: "＜";
	display: inline-block;/*忘れずに！*/
	width: 1.8rem;
	height: 1.8rem;
	margin-right: 8px;
	vertical-align: 0;
}
#enq_footer div button:nth-child(2) h2::after{
	content: "＞";
	display: inline-block;/*忘れずに！*/
	width: 1.8rem;
	height: 1.8rem;
	margin-left: 8px;
	vertical-align: 0;
}
/*--------------------------------------------
	///// 問い合わせページ
--------------------------------------------*/
#inquiry_cont .cont > p{
	font-size: 2.4rem;
	padding: 48px 0 0;
}
#inquiry_cont form{
	padding: 60px 0 40px;
}
#inquiry_cont form .form-group{
	width: 600px;
	margin: 0 auto 20px;
}
#inquiry_cont form label{
	display: block;
	text-align: left;
	font-size: 1.5rem;
	margin: 0 0 0 8px;
}
#inquiry_cont form input{
	width: 600px;
	height: 40px;
	margin: 0 auto;
	padding: 0 16px;
	font-size: 1.6rem;
}
#inquiry_cont form textarea{
	padding: 12px 16px;
	font-size: 1.6rem;
}
#inquiry_cont form button{
	margin: 60px 20px 0;
	padding: 6px 18px;
	width: 320px;
	height: 68px;
	font-size: 2.6rem;
	font-weight: bold;
	border: 4px #D50C24 solid;
	border-radius: 6px;
	color: #FFF;
    background-color: #D50C24;
	opacity: 1;
}
#inquiry_cont form button:hover{
	opacity: 0.7;
	cursor: pointer;
}
/*--------------------------------------------
	///// 問い合わせ 内容確認ページ
--------------------------------------------*/
#inquiry_cont .confirm > p{
	font-size: 1.6rem;
}
#inquiry_cont .confirm form .form-group > div{
	text-align: left;
	font-size: 1.6rem;
	border-top: 1px #C8C8C8 solid;
	padding: 8px 6px 16px;
}
#inquiry_cont .result > p{
	font-size: 2.0rem;
}
#inquiry_cont .result{
	height: 320px;
}

/*--------------------------------------------
	///// footer
--------------------------------------------*/
footer{
	padding: 0 0 48px;
}
footer button{
	border: none;
	background: transparent;
	padding: 0;
}
footer div:first-child{
	background-color: #D50C24;
	padding: 18px 0 14px;
}
footer h2{
	font-size: 4.0rem;
	font-weight: normal;
	color: #FFF;
	margin: 0;
}
footer h2::before{
	content: "";
	display: inline-block;/*忘れずに！*/
	width: 62px;
	height: 40px;
	background: url(/images/icon_mail.png) no-repeat;
	background-size: 62px auto;
	margin-right: 16px;
	vertical-align: -4px;
}
#corp_logo{
	display: flex;
	justify-content: center;
	margin: 40px 0 16px;
}
#corp_logo a{
	margin: 0 32px;
}
footer .asterisk{
	text-align: center;
}

/* =================================================================
   表示幅違いに対応するメディアクエリ
==================================================================== */
@media screen and (max-width:960px){
	body{
		overflow-x: hidden;
	}
	#wrapper{
		max-width: 960px;
		min-width: 769px;
	}
	.cont{
		width: 100%;
		padding: 0 12px;
	}
	/* header --------------- */
	header .cont{
		padding: 40px 22px 24px; 
	}
	#white_box{
		padding: 22px 26px;
		width: 480px;
		top:58px;
		right: 52px;
	}
	#white_box p{
		font-size: 1.7rem;
		text-align: left;
		line-height: 1.6;
	}
	#top_img .cont .asterisk{
		top: 226px;
		right: 48px;
	}
	/* 各セクション --------------- */
	#news .cont{
		padding: 0 32px;
	}
	#news li{
		padding: 8px 20px;
	}
	#howto ul{
		justify-content: center;
		flex-wrap: wrap;
	}
	#use ul{
		justify-content: center;
		flex-wrap: wrap;
	}
	#use .cont li{
		padding: 0 24px 30px ;
	}
	#use div{
		padding: 12px 0 0;
	}
	#download div{
		margin: 52px 0 0;
		padding: 0 24px 0 0;
		width: 500px;
	}
}

@media screen and (max-width:768px){
	#wrapper{
		max-width: 768px;
		min-width: 320px;
	}
	#main_nav{
		display:inline-block;
	}
	.hide{
		display: none!important;
	}
	section{
		padding: 52px 0 64px; 
	}
	section h2{
		margin: 0 0 30px;
		font-size: 2.4rem;
	}
	.cont{
		padding: 0 22px;
	}
	
	/* ハンバーガーメニュー --------------- */
	#main_nav h2 {
		display:block;  /* モバイルのみで使用⇒PC/モバイル表示判定にも使用 */
		margin:0;
		position:absolute;
		top:0;
		left:0;
		width:55px;
		height:45px;
		line-height:1.0;
		color:#fff;
		z-index:3;
		text-indent:-9999px;
	}
	#main_nav h2 span {
		display:inline-block;
		position:absolute;
		right:12.5px;
		width:30px;
		height:4px;
		background-color:#323232;
		transition:all .2s;
	}
	#main_nav #br1 {
		top:12px;
	}
	#main_nav #br2 {
		top:21px;
	}
	#main_nav #br3 {
		top:30px;
	}
	#main_nav #mn_list {
		display:block;   
		height:calc(100% - 45px);
		width:90%;
		min-width:288px;
		max-height:100%;
		position:absolute;
		top:0;
		left:-100%;
		padding-top:45px;
		overflow-y:hidden;
		background-color:rgba(213,12,36,0.95);
		transition:left .3s;
		z-index:2;
	}
	#main_nav #mn_list li {
		float:none;
		width:75%;
		min-width:240px;
		margin:0 auto;
		padding: 10px 0;
		border-bottom:1px solid #c8c8c8;
	}
	#main_nav #mn_list a {
		padding:0 0.5em;
		text-align:left;
		font-size:2.0rem;
		font-weight:bold;
		line-height:40px;
		border-right:none;
	}
	/* 展開されたメインナビ --------------- */
	
	#main_nav.active {
		height:100%;   /* オーバーレイ化する */
	}
	#main_nav.active #mn_list {
		overflow-y:auto;
		left:0;
	}
	#main_nav.active #br1 {
		transform:translateY(9px) rotate(-135deg);
	}
	#main_nav.active #br2 {
		opacity:0;
	}
	#main_nav.active #br3 {
		transform:translateY(-9px) rotate(135deg);
	}
	#main_nav button{
		font-size: 1.8rem;
		padding: 6px 36px 6px 0;
		border: 0px ;
		color: #FFF;
		background-color:rgba(255,255,255,0);
	}
	#main_nav .after_btn {
		margin-top: 0;
	}
	#main_nav #mn_list li {
		padding: 10px 8px;
		border-bottom: 1px solid rgba(255,255,255,0.5);
	}
	/* header --------------- */
	#top_img{
		background: none;
		background-color : #edeaf6;
		height: auto;
		margin-top: -20px;
	}
	#top_img h1 {
		width: 60vw;
		height: 23vw;
		max-width: 278px;
		background-size: 100% auto;
		margin: 0 auto;
	}
	#top_img > p:first-child{
		font-size: 2.4rem;
		padding-bottom: 5px;
	}
	#white_box{
		padding:0 0 20px;
		padding-top: calc(50% + 2.5em);
		width: 100%;
		top:inherit;
		right: inherit;
		background-color: none;
		background: rgba(255,255,255,0);
		position: relative;
	}
	#white_box p{
		font-size: 1.7rem;
		text-align: left;
		line-height: 1.6;
	}
	#top_img .cont{
		margin: 0 auto;
		padding: 44px 20px 32px;
		max-width: 520px;
	}
	#top_img h1 + .cont{
		padding-top: 10px;
	}
	#top_img h1 + .cont::before{
		position: absolute;
		content: '';
		display: block;
		width: 100%;
		height: 384px;
		background-image: url(/images/top_img_s.png);
		background-size: contain;
		background-repeat: no-repeat;
	}
	#top_img .cont .asterisk{
		position: relative;
		top: inherit;
		right: inherit;
	}
	
	/* 各セクション --------------- */
	#howto{
		padding-bottom: 30px;
	}
	#howto ul{
		justify-content: center;
	}
	#howto li{
		width: 100%;
	}
	#howto li:nth-child(odd){
		margin-right: 0;
	}
	#howto img{
		width: 100%;
		max-width: 460px;
		height: auto;
	}
	#howto li p{
		width: 100%;
		max-width: 460px;
		padding: 0 0 40px;
	}
	#use ul{
		justify-content: center;
		flex-wrap: wrap;
	}
	#use .cont li{
		padding: 0 24px 30px ;
	}
	#use div{
		padding: 12px 24px 0;
	}
	#start{
		padding: 40px 0 0;
	}
	#start h2 {
		margin-bottom: 28px;
		padding-top: 20px;
	}
	#start .cont {
		padding: 0 32px;
	}
	#start .sh_btn {
		flex-wrap:wrap;
		flex-direction: column; 
		margin: 0 auto;
		padding: 0;
	}
	#start .cont p {
		width: auto;
		padding-bottom: 40px;
		line-height: 1.7;
		font-size: 1.6rem;
	}
	#start button {
		margin: 20px auto 0;
		padding: 4px 16px;
		width: 240px;
		height: 60px;
		font-size: 2.0rem;
		border: 3px #D50C24 solid;
		border-radius: 4px;
	}
	#download {
		padding: 40px 0 0;
		display: flex;
		justify-content: center;
		flex-wrap:wrap;
		flex-direction: column; 
		text-align: center;
	}
	#download div {
		margin: 0;
		padding: 0 24px 28px;
		width: 100%;
	}
	#download div p {
		padding: 12px 0 20px;
	}
	#download div button {
		margin-left: 0;
		margin-top: 0;
	}
	#download div p::before {
		display: none;
	}
	#download h3 {
		font-size: 2.2rem;
		padding-left: 0;
		margin: 0 auto;
		text-align: center;
	}
	#download > img{
		max-width: 216px;
		width:calc(100% - 140px);
		height: auto;
		margin: 0 auto;
		padding: 0 ;
	}
	/*--------------------------------------------
	///// アンケートページ
	--------------------------------------------*/
	#enq_cont .cont > p {
		font-size: 2.4rem;
	}
	#enq_cont #question {
		display: flex;
		flex-direction: column; 
		margin: 20px 0 0;
	}
	#enq_cont #question section {
		width: 100%;
		padding-bottom: 60px;
	}
	#enq_cont #question select {
		width: 100%;
	}
	#scroll_box {
		overflow-y: scroll;
		margin: 30px auto 0;
		padding: 18px 28px 22px;
		width: 100%;
		height: 300px;
	}
	#enq_cont .sh_btn {
		padding: 40px 0 0;
	}
	#enq_cont .sh_btn button {
		font-size: 2.0rem;
		padding: 8px 24px;
		text-align: center;
	}
	#enq_cont .sh_btn .after_btn::after {
		content: none;
		right: 0px;
	}
	#enq_footer div:first-child {
		flex-direction: column; 
		padding: 12px 0;
	}
	#enq_footer div button {
		margin: 6px 0;
	}
	/*--------------------------------------------
	///// 問い合わせページ
	--------------------------------------------*/
	#inquiry_cont form input {
		width: 100%;
		max-width: 600px;
		font-size: 1.5rem;
	}
	#inquiry_cont form .form-group {
		width: 100%;
		max-width: 600px;
		font-size: 1.5rem;
	}
	#inquiry_cont form button {
		margin: 32px 0 0;
		width: 100%;
		max-width: 320px;
		font-size: 2.0rem;
	}
		
	/*--------------------------------------------
	///// footer
	--------------------------------------------*/	
	footer div:first-child {
		padding: 12px 0 8px;
	}
	footer h2 {
		font-size: 3.0rem;
	}
	footer h2::before {
		width: 42px;
		height: 30px;
		background-size: 42px auto;
		margin-right: 12px;
		vertical-align: -4px;	
	}
	#corp_logo {
		flex-direction: column; 
	}
	#corp_logo a {
		margin: 0 0 16px;
	}
	footer .asterisk {
		padding: 0 12px;
	}

}