@charset "utf-8";

/*==Reset==*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } *{ -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; } li { list-style: none; }

/*============================
PC
============================*/
html { font-size: 62.5%; }
body { font-family:'Hiragino Sans','ヒラギノ角ゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo', 'メイリオ', Verdana,'ＭＳ Ｐゴシック',sans-serif; font-size:1.3rem; color: #000; background: #FFF; }
hr { border: none; border-bottom: 4px dashed #ddd; margin: 30px 0 0; }

/* layout */
.contents{ width:1000px; margin: 0 auto; }
.contets_main{ float:left; width:685px; }
.contets_main_2{ float:none; }
.article{ border: solid 1px #938d8c; }
.latter{ margin: 0 5.7rem 4rem;}
.contets_sub{ float:right; width:300px; }
.gray_box {
	background: #eee;
	padding: 20px;
}
.mt30{margin-top: 30px;}
.for_sp{display: none;}

/* Float / Clearfix */
.clearfix { clear: both; }
.clearfix:after{ content:"."; display:block; height:0; clear: both; visibility:hidden; }
.side_photo{ float:left; padding:0 2rem 0 0; margin-bottom: 1.5rem; width:35%;}

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

/* link */
a, a:hover, a:visited { text-decoration: none; }
a { text-decoration: underline; }
section a { color: #0000ff; font-weight: bold; }
section a:hover img { opacity: .8; }
.link { text-align: right; margin: 1em 0; }
.btn{ margin:0 auto 6rem;}

/* img */
img { display: block; vertical-align: top; max-width: 100%; margin: auto; }

/* table */
.table1{ width:100%; margin:1rem auto; text-align:center; }
.table1 td{ padding: 1rem; border:2px solid #288504; }
.table2{ width:100%; margin:1rem auto; font-size:1.6rem; }
.table2 th, .table2 td{ padding: .6rem; border: 1px solid #CCC; }
.table2 th{ vertical-align: middle; background: #DDD; }
.table2 td{ width: 44%; line-height: 1.4; }

/* font */
.b{ font-weight: bold; }
.u{ text-decoration:underline; }
.g{ font-weight: bold; text-decoration:underline; color:#008C3B; }
.gry{color: #7B7B7B; }
.blue{ font-weight: bold;color:#0000FF !important; }
.green{ font-weight: bold;color:#008C3B; }
.r{ font-weight: bold; color:#d00; }
.e{ font-weight: bold; color:#008C3B; }
.i{ font-style: italic; color: #fc6f00; }
.small{ color: #676b6c; font-size: 1.2rem; line-height: 1.5; word-wrap: break-word; }
.large{ font-size: 120%; }
.big{ font-size: 140%; }
.text_r{ text-align:right; }
.text_c{ text-align: center; }
.mark { background: #FDF9CE;}

/* header ---------------------------------------------------------------------------------------*/
header {width: 100%; margin: 0 auto;}
.header_wrap{ width: 1000px; margin: 0 auto 1.2rem;}
.logo{ float: left; /* width:19.2rem; */ margin-top: .8rem; }
.sub_area{ float: right; width: 770px; margin-left: 3.8rem; }
.sub_area_top{ margin-bottom: 1.8rem; }
.sub_area_top img{ float: right; height: 30px; margin-top: .6rem; }
.sub_area .info{ position: relative; float: left; padding-left: 1rem; margin-top: 2.4rem; font-size: 1.2rem; }
.sub_area .info:before { position: absolute; content: ""; display: block; top: 1px; left: 0; width: 0; height: 0; border-left:6px solid #373838; border-top: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid transparent; }
.sub_area_bottom .date{ float: left; font-size: 1.3rem; line-height: 1; }
.sub_area_bottom .menu{ float: right; font-size: 1.4rem; }
.sub_area_bottom ul{ float:left; display: inline-block; margin-right: 4rem; }
.sub_area_bottom li{ display: inline-block; padding: 0 1rem; border-left: 1px solid #000; }
.sub_area_bottom li:first-child{ border: none; }
.sub_area_bottom img{ float: right; height: 26px; margin-top: -.6rem; }
.navi{ margin-bottom: 2rem; color: #FFF; border-radius:3px; background:#001866; }
.navi ul{ width: 1000px; margin: auto; box-sizing: border-box; }
.navi li{ display: inline-block; width:93px; height: 30px; padding: .8rem 0 .6rem; font-size: 1.5rem; line-height: 1; text-align: center; vertical-align: middle; box-sizing: border-box; }
.navi li.search{ width:250px; padding: .3rem 0; }
.header_keyword_color{ position: relative; color:#868686; background: #FFF;}
.header_keyword_color:before{ position: absolute; content: ""; top: -3px; left: 0; width:100%; border-top: 3px solid #06417D; }
/* pankuzu ---------------------------------------------------------------------------------------*/
.pankuzu{ font-size: 1.4rem; }
.pankuzu span{ color:#06417D; }
.pankuzu .small{ font-size: .5rem; }
/* article_title ---------------------------------------------------------------------------------------*/
.article_title { margin: 2rem 0 1rem; padding-left:1rem; border-left: 15px solid #06417D; }
.article_title h1 { font-size:2.9rem; line-height: 1.2; }
.article_title h2 { font-size:2rem; font-weight: normal; line-height: 1.4; }
/* article_write ---------------------------------------------------------------------------------------*/
.article_write{ width:633px; margin: 0 2.5rem; }
.article_write .journalist{ padding:1rem 0; margin: 1rem 0 2.5rem; border-top:1px solid #918b8a; border-bottom:1px solid #918b8a; }
.article_write h3 { float:left; font-size:1.5rem; font-weight: normal; }
.article_write .dateTime{ float: right; color: #5d6970; font-size: 1.2rem; }
/* footer ---------------------------------------------------------------------------------------*/
footer { padding: 3rem 2rem 4rem; margin-top: 1.5rem; border-top: 1px solid #ccc; text-align: center; font-size: 1.2rem; }
.footer_inner{ width: 1000px; margin: auto; }
footer ul{ margin-bottom: 3rem; }
footer li { display: inline-block; padding: 0 1rem; border-left: 1px solid #666; }
footer li:first-child { border-left: none; }
footer p { width: 700px; margin: 0 auto; }
footer p.mincho{ font-family: Georgia; line-height: 1; }
footer a{ color: #000; text-decoration: none; }
footer a:hover, footer a:visited { color: #000; text-decoration: underline; }
/* section ---------------------------------------------------------------------------------------*/
section + section { margin: 2rem 0 0; }
section h2 { width: 100%; padding:.5rem 0 .5rem 1rem; margin-bottom: 2rem; border-top: 1px solid #918b8a; border-left:15px solid #06417D; font-size: 2rem; font-weight: bold; line-height: 1.2; letter-spacing: 0.05em; }
section h3 { color: #333; border-left: 4px solid #008C3B; font-size: 2.1rem; padding: 0 0 0 1rem; line-height: 1.4; margin: 6rem auto 3rem;}
section p { margin-bottom: 1em; color:#444; font-size: 1.6rem; line-height:1.6; letter-spacing: -0.01em; }
/* YouTube ---------------------------------------------------------------------------------------*/
.video {position: relative; width: 100%; margin:10px; }
iframe {width: 100%;height: 360px;}
/* 客声 ---------------------------------------------------------------------------------------*/
.v{ display: table; width: 100%; border: 3px solid #ddd; background: #FFF; padding: 2rem; color: #333;margin: auto;margin: 2rem auto;}
.v img {width: 25%; margin: auto 2rem 1rem 0 ;float: left; }
.v hr { margin: 2rem auto; clear: both;}
.v h4 { font-size: 2.4rem; margin: 2rem 0 1rem; line-height: 1.4;}
.note { font-size: 1.2rem;text-align:right; }
.txt_list{font-weight:bold; padding: 1rem 0; border-bottom: 2px dotted #D17A7C; text-indent: 0;}
.fa-star { color:#ffb800; -webkit-text-stroke: 1px #6b5211; letter-spacing :3px; }
/* form/btn ---------------------------------------------------------------------------------------*/
.float, .float2{background: #f5f5f5; text-align: center; position: fixed; width: 100%; bottom: -300px; padding: 5px 0; transition: 0.5s; z-index: 1000;}
.float__mark{position: absolute; left: 50%; transform: translateX(-50%); animation: swing-loop 1.5s infinite;}
.float__mark:not(:target) { top: -45px\9; }
.float table, .float2 table{margin: 0 auto;}
.float table td, .float2 table td{width: 33%;}
.float td.pc, .float2 td.pc{display: table-cell!important;}
.float .timer_num, .float2 .timer_num, .float .zansu_num, .float2 .zansu_num{color: #d00; font-size: 2.3rem;}
.float .table-center, .float .table-right, .float2 .table-center, .float2 .table-right {position: relative;}
.float .table-left, .float2 .table-left {text-align: left; padding-right: 20px; vertical-align: middle;}
.float .timer03,.float2 .timer03, .float .zansu,.float2 .zansu{text-align: left; width: auto; padding: 0; margin: 0; color: #000; font-weight: bold; line-height: 1.3;}
@keyframes swing-loop{
	0% {top: -35px} 50% {top: -50px} 100% {top: -35px}
}
.float__btn{background: #2c77d9; display: inline-block; padding: 10px 15px; color: #fff; font-weight: bold; font-size: 3rem; line-height: 1.4; text-decoration: none; border-radius: 3px; transition-duration: 0.2s; min-width: 400px; color: #fff!important; border: none; font-family: inherit; -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.3); box-shadow: 0 3px 5px rgba(0,0,0,0.3); cursor: pointer;}
.float__btn:hover{background: #4a89dc; -webkit-box-shadow: 0 3px 15px 0 rgba(0,0,0,0.8); box-shadow: 0 3px 10px 0 rgba(0,0,0,0.5);}
.float__btn .markup{display: inline-block; padding: 0 5px; background: #FFEE5A; color: #005081;}
.float__btn2{background: #1d9b01; display: inline-block; padding: 7px 15px 0; color: #fff; font-weight: bold; font-size: 3rem; line-height: 1.4; text-decoration: none; border-radius: 10px; box-shadow: 0px 5px 0px 0px #247313; transition-duration: 0.2s; min-height: 65px; min-width: 400px; position :relative; overflow: hidden; color: #fff!important;}
.float__btn2:hover{background: #50bf38;}
.reflection {height :100%; width :30px; position :absolute; top :-180px; left :0; background-color: #fff; opacity :0; transform: rotate(45deg); animation: reflection 1.5s ease-in-out infinite; -webkit-transform: rotate(45deg); -webkit-animation: reflection 1.5s ease-in-out infinite; -moz-transform: rotate(45deg); -moz-animation: reflection 1.5s ease-in-out infinite; -ms-transform: rotate(45deg); -ms-animation: reflection 1.5s ease-in-out infinite; -o-transform: rotate(45deg); -o-animation: reflection 1.5s ease-in-out infinite;}
@keyframes reflection{
	0% {transform: scale(0) rotate(45deg); opacity: 0;} 20% {transform: scale(0) rotate(45deg); opacity: 0.5;} 40% {transform: scale(4) rotate(45deg); opacity: 1;} 100% {transform: scale(50) rotate(45deg); opacity: 0;}
}
@-webkit-keyframes reflection {
	0% {-webkit-transform: scale(0) rotate(45deg); opacity: 0;} 20% {-webkit-transform: scale(0) rotate(45deg); opacity: 0.5;} 40% {-webkit-transform: scale(4) rotate(45deg); opacity: 1;} 100% {-webkit-transform: scale(50) rotate(45deg); opacity: 0;}
}
@-moz-keyframes reflection{
	0% {-moz-transform: scale(0) rotate(45deg); opacity: 0;} 20% {-moz-transform: scale(0) rotate(45deg); opacity: 0.5;} 40% {-moz-transform: scale(4) rotate(45deg); opacity: 1;} 100% {-moz-transform: scale(50) rotate(45deg); opacity: 0;}
}
@-ms-keyframes reflection {
	0% {-ms-transform: scale(0) rotate(45deg); opacity: 0;} 20% {-ms-transform: scale(0) rotate(45deg); opacity: 0.5;} 40% {-ms-transform: scale(4) rotate(45deg); opacity: 1;} 100% {-ms-transform: scale(50) rotate(45deg); opacity: 0;}
}
@-o-keyframes reflection {
	0% {-o-transform: scale(0) rotate(45deg); opacity: 0;} 20% {-o-transform: scale(0) rotate(45deg); opacity: 0.5;} 40% {-o-transform: scale(4) rotate(45deg); opacity: 1;} 100% {-o-transform: scale(50) rotate(45deg); opacity: 0;}
}
.toggle__btn {cursor: pointer;}
.float__form { max-width: 700px; margin: 0 auto; display: none;}
.float__form h3 {font-size: 2.3rem; color: #2060b3; margin: 10px 0;}
.float__form input { margin: 10px 0; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select {background: #ffffff;width: 100%;padding: 0.5em;border: 2px solid #ccc;border-radius: 5px;font-size: 18px;font-family: inherit;transition: all 0.2s ease;box-sizing: border-box;}
input:focus {background: #fff7ca;border-color: #0088c9;-webkit-box-shadow: 0px 2px 0px #0088c9;box-shadow: 0px 2px 0px #0088c9;}
.btn1-wrap { position: relative; margin: 60px auto 0;}
.btn1-wrap a { display: block; width: 100%; background: #ff9108; padding: 30px 0; margin: 0 auto; text-align: center; color: #fff; font-size: 3.2rem; line-height: 1.2; text-decoration: none; font-weight: bold; border-radius: 100px; -webkit-box-shadow: 0 5px 0 #ff6000; box-shadow: 0 5px 0 #ff6000; position: relative; top: 0; transition: 0.1s; }
.btn1-wrap a:hover { background: #333; top: 3px; -webkit-box-shadow: 0 2px 0 #000; box-shadow: 0 2px 0 #000; }
.btn2-wrap { position: relative; margin: 30px auto;}
.btn2-wrap a { display: block; width: 100%; background: #268c42; padding: 10px 30px; margin: 0 auto; text-align: center; color: #fff; font-size: 3.5rem; text-decoration: none; font-weight: bold; border-radius: 100px; -webkit-box-shadow: 0 5px 0 #056a1d; box-shadow: 0 5px 0 #056a1d; position: relative; top: 0; transition: 0.1s; }
.btn2-wrap a:hover { background: #32ab53; top: 3px; -webkit-box-shadow: 0 2px 0 #056a1d; box-shadow: 0 2px 0 #056a1d; }
.btn2-wrap a img { height: 80px;margin: 0 auto; }
.btn2-wrap2 a { display: block; width: 100%; background: #268c42; padding: 20px; margin: 0 auto; text-align: center; color: #fff; font-size: 3rem; text-decoration: none; font-weight: bold; border-radius: 100px; -webkit-box-shadow: 0 5px 0 #056a1d; box-shadow: 0 5px 0 #056a1d; position: relative; top: 0; transition: 0.1s; }
.btn2-wrap2 a:hover { background: #32ab53; top: 3px; -webkit-box-shadow: 0 2px 0 #056a1d; box-shadow: 0 2px 0 #056a1d; }
.btn2-wrap2 a img { height: 80px;margin: 0 auto; }

.btn-float { position: absolute; left: 50%; transform: translateX(-50%); animation: swing-loop 1.5s infinite; z-index: 100;margin: -35px auto 0; }
.btn-float:not(:target) { top: -45px\9; }
/* bnr ---------------------------------------------------------------------------------------*/
.bnr{ display: block; letter-spacing: -0.01em; text-decoration: none; }
.bnr .ttl{ padding:.8rem; color: #4f4f4f; font-size: 1.5rem; font-weight: bold; background: #f4f4f4; }
.bnr p{ padding: .8rem; color: #181818; font-size: 1.3rem; line-height: 1.2; }
.bnr .ico{ float: right; width:12%; margin-left: .8rem; }

/* ul ---------------------------------------------------------------------------------------*/

dl{
  padding-bottom: 1rem;
  width:100%;
  list-style: none;
}
dl dt.li-tit{
  position: relative;
  padding: 7px 5px 7px 20px;
  margin-bottom:5px;
  background: #08004B;
  color: #fff;
  font-size:1.8rem;
  line-height: 2;
  margin-top: 2rem;
}

dl dd.li-item{
  font-size:1.6rem;
  position: relative;
  line-height: 1.8;
  padding-left: 20px;
  border-bottom: dashed 1px #448ccb;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
dl dd.li-item:before{
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  height: 0;
  width: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #08004B;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
dl dd.li-item:last-child{
	padding-bottom: 0.5rem;
}
.pb0{
	padding-bottom: 0;
}
.pb30{
	padding-bottom: 30px;
}
.mb30{
	margin-bottom: 30px;
}

/*============================
SP
============================*/
@media screen and (max-width: 760px) {
	.pc { display: none; }
	.sp { display: block; }
	body { font-size: 1.4rem; line-height: 1.6; }
	
	/* layout */
	.contents{ width:100%; }
	.contets_main{ float:none; width:100%; }
	.article{ border: none; }
	.latter{ margin: 0 1rem 1rem 1rem;}
	.contets_sub{ float:none; width: 100%; padding: 0 1rem 1rem 1rem; box-sizing: border-box; }
	.spmt15{margin-top: 15px;}
	.spmt30{margin-top: 30px;}
	.for_sp{display: block;}

	/* Float / Clearfix */
	.side_photo{ float:left; padding:0 2rem 1rem 0; width:50%;}

	/* font */
	.small{ font-size: .9em; margin-bottom: 1rem; }

	/* table */
	.table2 td{ font-size:90%; }
	/* header ---------------------------------------------------------------------------------------*/
	.header_wrap{ width: 100%; padding: .5rem 1rem; margin: 0 auto .5rem; box-sizing: border-box; }
	.logo{ width:12.7rem; margin-top: 0; }
	.sub_area{ width:auto; margin: 2vw 0 0 0; }
	.sub_area_top{ margin: 0; }
	.sub_area_top .date03{ float: left; margin: .4rem 4vw 0 0; }
	.sub_area_top img{ margin-top: 0; }
	.sub_area .info{ display: none }
	.sub_area_bottom{ display: none }
	.navi{ display: none }
	/* pankuzu ---------------------------------------------------------------------------------------*/
	.pankuzu{ padding:.8rem 1rem; margin: 0; color:#FFF; background: #06417D; }
	.pankuzu span{ color:#FFF; }
	/* article_title ---------------------------------------------------------------------------------------*/
	.article_title { padding:1rem 0rem 0.6rem 1rem; margin: 0; margin-bottom: 1.5rem; border-left: 10px solid #06417D;  }
	.article_title h1 { font-size:160%; }
	.article_title h2 { font-size:115%; color:#616c72; font-weight: bold; }

	/* article_write ---------------------------------------------------------------------------------------*/
	.article_write{ width:100%; padding: 0 1rem; margin: 0;  box-sizing: border-box; }
	.article_write .journalist{ padding: .6rem 0 .4rem; margin: 1rem 0 2.5rem; }
	.article_write h3 { float:left; font-size:1.5rem; font-weight: normal; }
	.article_write .dateTime{ margin-top: .2rem; }
	/* footer ---------------------------------------------------------------------------------------*/
	footer { padding: 0 0 2rem; margin-top: 2rem; border-top: 1px solid #c7c7c7; font-size: 1.4rem; }
	.footer_inner{ width: 100%; margin: auto; }
	footer ul{ display: flex; flex-flow: wrap; align-items: center; align-content:center; margin-bottom: 2rem; }
	footer li { display: block; width:50%; padding: 1rem; border-left: 1px solid #c7c7c7; border-bottom: 1px solid #c7c7c7; }
	footer li:nth-child(3) { width:100%; border-left: none; }
	footer li:nth-child(4) { width:100%; border-left: none; }
	footer p { width: 100%; }
	footer p.mincho{ font-size: 80%; }
	footer p.mincho img{ width: 30%; }
	/* section ---------------------------------------------------------------------------------------*/
	section + section { margin: 2rem 0 0; }
	section h2 { padding-top: 0; margin: 1.6rem 0; border-top: none; border-width: 10px; font-size: 120%; }
	section h3 { color: #333; border-left: 4px solid #008C3B; font-size: 2.1rem; padding: 0 0 0 1rem; line-height: 1.4; margin: 6rem auto 3rem;}
	section p { font-size: 115%; }
	/* YouTube ---------------------------------------------------------------------------------------*/
	.video { margin:0; }
	iframe { height: 195px; }
	/* 客声 ---------------------------------------------------------------------------------------*/
	.v{padding: 1rem ; color: #333;margin: auto;margin: 2rem auto;}
	.v img {width: 80%; margin: 0 auto  ;float: none; }
	.v hr { margin: 2rem auto; }
	.v h4 { font-size: 17px; margin: 20px 0 10px; }
	/* form/btn ---------------------------------------------------------------------------------------*/
	.float__form h3 {font-size: 5vw;}
	.float__form input {width: 95%; margin: 5px 0;}
	.float__btn { font-size: 5vw; width: 95%; min-width: 0; }
	.btn1-wrap a, .btn2-wrap a { width: 100%; font-size: 5vw; }
	.btn2-wrap  { margin-top: 20px;}
	.btn2-wrap a img { height: 18vw; }
	.btn2-wrap2 a { width: 100%; font-size: 6vw; }
	.btn2-wrap2  { margin-top: 20px;}
	.btn2-wrap2 a img { height: 18vw; }
}