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

body {margin:0;padding:0;font-family:"メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;font-size: 62.5%;line-height:200%;color:#444;background:#fff;overflow-x: hidden;-webkit-text-size-adjust: 100%;word-break: break-all;}
ol,ul,li {list-style:none;margin:0;padding:0;}
dl,dt,dd {margin:0;padding:0;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;margin:0;padding:0;}
p {margin:0 0 1em;padding:0;}
a , a img { overflow: hidden; color:#333;text-decoration: none;border:none;-webkit-transition: all 0.2s;-moz-transition: all 0.2s;-ms-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;}
a:hover,a:active { color: #64b8cb;border:none;outline:none;}
a:hover img , a:active img {opacity:.7;border:none;outline:none;}

html,body {}
h1 {font-weight:normal;}
h2 {font-weight:normal;}
h3 {font-weight:bold;}
img {max-width: 100%;width:auto;height: auto;display:block;}

main:after,
article:after,
section:after,
div:after,
ul:after,
dl:after {
  content: "";
  display: block;
  clear: both;
}

.pc {display:none;}

#header {padding:9px 5px; width: 100% !important; height:55px; border-bottom:6px solid #64b8cb;}
#header .header-in {margin:0 auto !important;} 
#header .logo {width:180px;height:auto;margin:0 1%;}
#header .contact {display:none;}
#header .contact a:hover img {opacity:.7;}

.tel_toiawase { width:85%; margin:4% auto;}

#mainimg-sp .copy {width: 35%;position: absolute;top:60%;left:63%;z-index: 10;}
#mainimg-sp .copy:hover {opacity:.8;}
#mainimg-sp {position:relative !important;}



#main {margin:auto !important;}
#main h2 {font-size:30px;line-height:1.3;padding:2px 0 0 10px;}
#main h2 span {font-weight:normal;font-size:16px;margin-left:1em;}

.main_wrap { margin:2% auto !important; width:100%; }

.contents_btn {text-align:center;padding: 20px 0 0;}
.contents_btn li {width:60%;display:inline-block;margin:0 auto;margin:15px 0;}
.contents_btn li a {color:#333;}
.contents_btn li img {border-radius:50%;border:1px solid #ccc;margin-bottom:10px;}
.contents_btn li span {font-size:14px;display:block;line-height:1.4;}
.contents_btn li .eng {font-size:24px;color:#11833b;font-weight:bold;}

#info_area { background:#a2d4e0;padding:5% 2% !important; background-size: cover;}
.info_list {max-width:1000px !important; margin:0 auto !important;padding:0 2% !important;}

#sdgs {padding:0 2% 3%!important;}
#sdgs .all_inner {max-width:1080px !important; margin:0 auto !important;padding:0 2% !important;}

#taiken {background:url(../images/taiken_back.jpg) no-repeat; background-size:cover; padding:5% 3%;}

.box27 {
    position: relative;
    margin: 10% auto 4%;
    padding: 5% 4% 6%;
	background:#fff;
	border-radius:0 10px 10px 10px;
	border: solid 2px #fff;
	font-size:14px;
	line-height:1.6em;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -2.25em;
    left: -3px;
    padding: 0.5em;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 20px;
    background: #ef7992;
    color: #ffffff;
    font-weight: 600;
    border-radius:10px 10px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
}

.btn_area { width:100%; text-align:center; margin-top:2%; margin-bottom:2%;}
.entry_btn { font-size:20px; font-weight:600; color:#fff; display:inline-block;margin:3% auto 0 !important; text-align:center;padding:.5em 1.5em !important; background:#f5b02e;}
.entry_btn:hover {opacity:.7;}


table.type12 {
	width: 100%;
	font-size: 16px;
	border-collapse: collapse;
	text-align: center;
	line-height: 1.5;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	margin:3% auto !important;
}


table.type12 tbody th {
	width: 32%;
	padding: 10px 2em;
	text-align:left;
	vertical-align: middle;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background: #efefef;
}
.type12 tbody tr .first {
	width: 25%;
	padding: 15px 10px;
	vertical-align: middle;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.type12 tbody tr .second {
	width: 32%;
	padding: 15px 10px;
	text-align: center;
	vertical-align: middle;
	border-bottom: 1px solid #ccc;
}

.type12 tbody tr .second span { font-size:12px; display:block;}

table.type12 thead th {
	padding: 10px;
	font-size: 18px;
	text-align:center;
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom:1px solid #ccc;
}

table.type12 thead th:last-child { border-right:none;}



table.type13 {
	max-width:800px;
	width: 90%;
	font-size: 14px;
	border-collapse: collapse;
	text-align:left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	margin:3% auto !important;
}


table.type13 tbody th {
	width: 30%;
	padding: 10px 2em;
	vertical-align: middle;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.type13 tbody tr .first {
	width: 65%;
	padding: 15px 2em;
	vertical-align: middle;
	border-bottom: 1px solid #ccc;
}



#page_title h2 img {width:65%;max-width:400px;margin:auto;padding:26px 0; vertical-align:middle !important;}

 
#left_area {padding:3%;}
.top #left_area {padding:0 0 5%;}

#right_area { width:98%;padding:0 2% 6%; margin:auto; }
.banner_wrap {width:65%;margin:auto; padding-right:1.5%; padding-bottom:1em;}

.contents_menu {margin-bottom:10%;}
.contents_menu h3 {background:#11833b;color:#fff;font-size:20px;padding:15px;}
.contents_menu li a {font-size:14px;padding:20px 15px;display:block;border-bottom:1px solid #aaa;background:#fff;position:relative;}
.contents_menu li a:after {content:"\f125";font-family:ionicons;font-size:12px;position:absolute;right:10px;top:35%;}

#footer {padding: 2% 0 0;margin-top:0; border-bottom:0; vertical-align:bottom;}
.footer_area {padding:2% 5% ;max-width:80%; text-align:center;margin:0 auto !important;}
.footer_area .logo {text-align:center;font-size:12px; line-height:1.3em; margin:auto;}
.footer_area .logo img {width:80% !important; margin:auto;}
.footer_area .logo h4 {width:100%; margin: auto auto 2%;}
.footer_area .contact {width:52%;margin:20px auto 0;text-align:right;}
#footer .copy {padding:.5% 3%;font-size:11px;text-align:center;}

/* ドロワーナビ */
.drawer-hamburger {z-index:14;top: 0;background:#fff;}
.drawer-nav {z-index:12;}
.drawer-open #contents , .drawer-open #sp_head .head_logo_sp.block {opacity:.5;}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {background:#64B8CB;height: 5px;}

.drawer-open .drawer-hamburger-icon:after, .drawer-open .drawer-hamburger-icon:before {background:#fff;}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon::hover {background:#fff;}

.drawer--right.drawer-open .drawer-hamburger {right:0;background:#64B8CB;}
.drawer-nav {color: #333;background-color:rgba(255,255,255,.95);padding-top:62px;}
.drawer-menu li {border-bottom: 1px solid #eee;font-family: 'Stoke', sans-serif;font-size:1.4em;}
.drawer-menu li:first-child {border-top: 1px solid #eee;}
.drawer-menu li  {color:#333;display: block;padding: 1em;position:relative;}
.drawer-menu li a:before {content:"\f125";font-family:ionicons;font-size:12px;position:absolute;top:38%;right:1.5em;color:#ccc;}
.drawer-overlay {background:rgba(238,238,238,.7);}

.drawer-menu li ul.sp_nav_sub {font-family: 'Stoke', sans-serif;font-size:.7em;}
.drawer-menu li ul.sp_nav_sub li { border-top:1px dashed #eee;border-bottom:none;}
.drawer-menu li ul.sp_nav_sub li:first-child { border-top:none; }




/* スライドショー */
.slide {
	position: relative;
	width: 100%;
	padding-top:80% !important;
	overflow: hidden;
	margin: 0 auto  !important;
}
.slide .item , .slide .item-sp {
	width: 100%;
	position: absolute;
	top: 0;
	display: none;
}
.slide .in {
	-webkit-transform: scale(1);
	transform: scale(1);
	z-index: 2;
}
.slide .out {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: 8s;
	transition: 8s;
	z-index: 1;
 }
.slide .title {
	text-align: center;
	color: rgba(102, 102, 102, 0.70);
	margin: 20px 0 15px 0;
}



#all_area {width:100%; margin:4% auto !important;}
#main h1 {font-size:24px;line-height:1.4em; margin:auto !important;padding:1em .8em 1em .1em;text-align:center; font:600;}

#main .all_inner .aisatu { margin:1% auto; padding:0 2% !important;line-height:1.7em;font-size:16px; }

#main .all_inner { max-width:1080px !important;width:95% !important;margin:0 auto !important; padding:3% !important;}

#main #sdgs .all_inner ul { background:#fff;border: solid 2px #c60f28;width:80%; padding:2em 3em;margin:7% auto; text-align:center; vertical-align:middle !important;}
#main #sdgs .all_inner ul .sdgs_left {width:35%; padding-right:5%; vertical-align:middle !important;text-align:center; margin:auto !important;}
#main #sdgs .all_inner ul .sdgs_right {width:100%; line-height:1.4em;font-size:20px; text-align:left; vertical-align:middle !important;}
#main #sdgs .all_inner ul .sdgs_left img { margin-bottom:2em !important; }

#sdgs .all_inner .sdgs_img { margin:5em auto !important; text-align:center;}
#sdgs .all_inner .sdgs_img img { width:95%; margin:3% auto;}

.all_inner .tel_toiawase_img { margin:5em auto !important; text-align:center;}
.all_inner .tel_toiawase_img img { width:63% !important; margin:3% auto;}

.sdgs_text { width:100%; margin:auto; text-align:center !important;} 
.sdgs_text .sdgs_link { display:inline-block !important;text-align:left; line-height:1.8em;font-size:16px;margin:auto !important; ;}

#all_area .all_inner .point { width:100%; margin:2% auto ;}
#all_area .all_inner .point li { width:95% !important; margin-right:4%; vertical-align:top;}
#all_area .all_inner .point li:last-child { margin-right:0;}
#all_area .all_inner .point li img { margin-top:3%;}
#all_area .all_inner .point li h2 { font-size:20px; margin:6% 0 4%; padding:0 2%;}
#all_area .all_inner .point li p { font-size:14px; line-height:1.6em; padding:0 2%;}

.course { margin:3% auto; background-color:#64b8cb; border-radius:10px; padding:3% 5%; vertical-align:top;}
.course_left { width:40%; margin:2% auto;}
.course_right { width:95%;font-size:16px; line-height:1.6em; color:#fff; vertical-align:top; padding:.2em;}

h3  {font-size:22px;line-height:1.4em; margin:auto auto auto 2% !important;padding:1em .8em .5em .1em;text-align:left; font:600;}
h3:before {content:"";background:url(../images/icon.png) no-repeat left center;background-size:cover;width:25px;height:25px;display: inline-block; vertical-align:middle;margin-top:-1%;margin-right:10px;}

.course_text { font-size:14px; line-height:1.7em; margin:2% 4% 8% 6%;}

.border { width:95%;background:cyan; text-align:center; margin:auto;
  border: 1px solid #b5b5b6;
  box-sizing:border-box;
}


#page_title {background:url(../images/sub_pagetop_back.png) no-repeat top right;background-size:cover; height:100px; margin-top:0px !important; vertical-align:middle !important;}



@media screen and (min-width:480px) {
	#page_title h2 img {width:30% !important;}
.all_inner .tel_toiawase_img { width:100% !important; margin:1% auto;}

}

@media screen and (min-width:568px) {
.contents_btn li {width:28%;display:inline-block; vertical-align:top;margin:0 auto;margin:15px 1.5%;}
.contents_btn li span {font-size:13px;}
.contents_btn li .eng {font-size:20px;}

#header .logo {width:210px;}
#header_sub .logo {width:155px;}

#sdgs .all_inner .sdgs_img img { width:70%;}


.banner_wrap {width:47%;margin:auto; padding-right:1.5%;display:inline-block; padding-bottom:0.2em;}
.footer_area .logo h3 {width:80%;}


#main #sdgs .all_inner ul .sdgs_left {width:30%; display:inline-block; }
#main #sdgs .all_inner ul .sdgs_right {width:60%; display:inline-block;}
#main #sdgs .all_inner ul .sdgs_left img { margin-bottom:0 !important; }

#all_area .all_inner .point li { width:47% !important; display:inline-block !important;}
#all_area .all_inner .point li:nth-child(2) { margin-right:0;}

.box27 { margin:3% auto 1.5%;}

#page_title h2 img {width:40% !important;}
}


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

#header {padding:10px auto; margin:auto;position: absolute;z-index: 10; height:90px; background-color:#fff;}
#header .logo {float: left;padding-left: 3%;width:240px;}
#header .contact {display:block;float:right;width:180px;margin:0;padding: 0.2% 2% 10px 0;}
#gnavi { padding-bottom:2%;}
#gnavi .menu-container  {margin:.3% 0 0 !important;width:800px;display:block;float:right !important; padding-right:1%;}
#gnavi .menu-container .menu ul .menu_contents a:hover { color:#f39800;}
#gnavi .menu-container .menu ul { margin: 0 ; width: 100%; list-style: none; padding: 0;}
#gnavi .menu-container .menu ul .menu_contents {padding: 0; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin: 1.5% 0 1%;width:14%;float:right;font-size:14px !important;color:#231815; text-align:center; border-left:1px dotted #727171;
}

#page_title { margin-top:90px !important;}


.slide { width:100%;padding-top:43% !important; margin-top:13.8% !important;}

#mainimg {position:relative !important;}
#mainimg .copy {width: 28%;position: absolute;top: 26%;left:70%;z-index: 10;}
#mainimg .copy:hover {opacity:.8;}
#mainimg .copy_wrap .copy .copy_sub {width:48%;}



#info_area {padding:3% 5% !important;}
.info_list {padding:2% 3% !important;}
.info_list ul {padding: 2% 5% ;}
#info_area .info_list h2 { font-size:26px; padding:1.5% 0 0 4.5% !important;}
.info_list ul {margin:0 auto 1% !important;}
.info_list li a , .info_list li span {display: inline-block;vertical-align: middle;}
.info_list li a {margin-top: 0;margin-left: .5em;width:95%;}
.info_list li span.date  {margin-left: .5em;}

#main #sdgs .all_inner ul {width:70%; margin:3% auto;}
#main #sdgs .all_inner ul .sdgs_right {font-size:24px; line-height:1.6em;}

#sdgs .all_inner .sdgs_img img { width:60%;}



#page_title h2 img {padding:30px 0; width:36% !important;}

.footer_area {padding: 10px 3%;max-width: 94%;margin: 0 auto;text-align:left;}
.footer_area .logo {width: 400px;float: left;text-align:left;}
.footer_area .contact {width: 220px;margin: 0;text-align: right;float: right;padding-top:10px;}
.footer_area .logo img {margin:auto 0;}
 #footer .footer_area .logo h3 {margin: auto 0px 2% !important; width:100%;text-align:left !important;}




#main h1 {font-size:28px;padding:0 1.2em 2% .5em;}

.box27 {margin: 1% 4% 0 !important;padding: 3% 4%;}
.box27 .box-title { font-size: 24px;top: -2.1em;}

.entry_btn { font-size:24px; }

#main .all_inner .aisatu {font-size:18px; padding:2% !important; margin:auto !important;}
.sdgs_text .sdgs_link {font-size:18px;}

#all_area {padding-top:0;}
#main .all_inner { padding:3% !important; margin:auto;}
#all_area .all_inner .left-area { width:53%; float:left; margin:1% auto !important; }
#all_area .all_inner .right-area { width:32%; float:left; padding-right:6% !important; padding-left:4%; margin:1% auto; padding-bottom:2%;}

.course {padding:3%; }
.course_left { width:30%; display:inline-block; margin:0 3% 0 0;}
.course_right { width:63%; display:inline-block; }

.course_text { margin:2% 4% 5% 6%;}


table.type13 {font-size: 16px;}
	
table.type13 tbody th {
	width: 25%;
	padding: 10px 2em;
	vertical-align: middle;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.type13 tbody tr .first {
	width: 75%;
	padding: 15px 2em;
	vertical-align: middle;
	border-bottom: 1px solid #ccc;
}

.all_inner .tel_toiawase_img { width:70% !important;}


}





@media screen and (min-width:900px) {
#header {padding:15px 0;}
#header .logo {width: 270px;}
#header .contact { width:190px;margin:0;padding:1% 2% 10px 0;}

#gnavi .menu-container  {margin: 0 !important;}
#gnavi .menu-container .menu ul .menu_contents {font-size:15px !important;}

#all_area .all_inner .left-area p { line-height:1.8em;}

#page_title h2 img {padding:20px 0; width:30% !important;}

.slide { margin-top:13% !important;}


#sdgs .all_inner .sdgs_img img { width:50%;}
}

@media screen and (min-width:1025px) {
#header {padding: 0;height:105px;}
#header .logo { position: absolute;top:8px;left: -1%;}
#gnavi .menu-container  {margin:0 !important;}

#page_title { margin-top:105px !important;}

#mainimg .copy_wrap {max-width:1080px;margin:0 auto;}
#mainimg .copy {width: 25%;top:26%;left:70%;}
#mainimg .copy_wrap .copy .copy_sub {width:40%;}
#main {padding:0;}
.main_wrap {max-width:1010px;margin:2% auto !important;}

.slide { margin-top:105px !important;padding-top:43% !important;}

#main #sdgs .all_inner ul {width:60%;}
#main #sdgs .all_inner ul .sdgs_left {padding-right:0;}
#main #sdgs .all_inner ul .sdgs_left img { width:80%; text-align:right !important;}

#sdgs .all_inner { width:80% !important;}
.top #left_area {padding: 0;}
#left_area , .page #left_area {width: 705px;padding: 0;float: left;}

.contents_btn {text-align: left;padding: 0;}
.contents_btn li {width: 230px;margin:0 32px 0 0;text-align:center;}
.contents_btn li:last-child {margin-right:0;}



#right_area {padding: 0;width: 300px;}

.footer_area {padding: 0 5% 10px;}
.banner_area .banner li {width:18.8%; }
.banner_area .banner li { margin-right:1% !important;}
.banner_area .banner li:nth-child(4) { margin-right:1% !important;}
.banner_area .banner li:nth-child(5) { margin-right:0 !important;}

.sub_header_back  { height:100px;}

#all_area .all_inner .point li { width:30% !important; display:inline-block !important;}
#all_area .all_inner .point li:nth-child(2) { margin-right:2%;}

.course_right { padding:1em .5em;}
#page_title h2 img {padding:33px 0;}
}

@media screen and (min-width:1200px) {
#all_area .all_inner .left-area { width:65%; float:left; margin:1% auto !important; }
#all_area .all_inner .right-area { width:26%; float:left; padding-right:2% !important; padding-left:6%; margin:1% auto;}

#page_title {  height:115px !important;}
#page_title h2 img { width:26% !important;}
}

@media screen and (min-width:1300px) {
.main_wrap {margin:2% auto 0;}

.info_list ul {padding: 2% 3.5% ;}
#info_area .info_list h2 { font-size:28px; padding:1.5% 0 0 3.5% !important;}

#main .all_inner { max-width:1180px;}



.banner_area .banner {max-width:1180px;}
}

@media screen and (min-width:1400px) {
#page_title h2 img { width:18% !important;}
}

@media only screen
    and (min-device-width:768px)
    and (max-device-width:1024px)
    and (orientation:portrait){
}






@media screen and (max-width: 767px) {
 .social_freame {margin-top: 3em;}
.social img {padding:3em 1.5em; width: 10%;}
}




#googlemap {
position: relative;
padding-bottom: 40%;
height: 0;
overflow: hidden;
border:3px solid #fff;
}
#googlemap iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}




/* お問い合せページ */
#toiawase .contact .attention {font-size:14px; line-height:1.6em;}


#toiawase {padding:2%;}
/* --- フォームエリア --- */
form.contact {
width: 100%; /* フォームエリアの幅 */
font-size: 14px;
}
/* --- フォームエリア内の段落 --- */
form.contact p {
line-height: 130%;
}

/* --- 部品グループ --- */
form.contact div.fields {
margin-top:3%;margin-bottom: 20px; /* 部品グループの下マージン */
padding: 4px; /* 部品グループのパディング */
background-color: #f9f9f9; /* 部品グループの背景色 */
border: 1px #c0c0c0 solid; /* 部品グループの境界線 */
}

/* --- テーブル --- */
form.contact table {
width: 100%; /* テーブルの幅 */

}
/* --- キャプション --- */
form.contact caption {
margin-bottom: 4px; /* キャプションの下マージン */
padding: 10px 8px; /* キャプションのパディング（上下、左右） */
background: #f9f9f9 ; /* キャプションの背景 */
border: 1px solid; /* キャプションの境界線 */
border-color: #c0c0c0 #999999 #999999 #c0c0c0; /* キャプションの境界線色（上右下左） */
text-align: left;
color: #808080; /* キャプションの文字色 */
}
/* --- 見出しセル（th） --- */
form.contact th {
width: 28%; /* 見出しセルの幅 */
padding: 10px 8px; /* 見出しセルのパディング（上下、左右） */
background-color: #d0eaef; /* 見出しセルの背景色 */
border-bottom: 1px #c0c0c0 dotted; /* 見出しセルの下境界線 */
text-align: center;
line-height: 130%;
font-size:14px;
font-weight: normal;
}
/* --- 見出しセル内の補足テキスト --- */
form.contact th span.supplement {
font-weight: normal;
}
/* --- データセル（td） --- */
form.contact td {
padding: 10px 5px 7px; /* データセルのパディング（上、左右、下） */
background-color: #ffffff; /* データセルの背景色 */
border-bottom: 1px #c0c0c0 dotted; /* データセルの下境界線 */
}
/* --- データセル内の補足テキスト --- */
form.contact td span.supplement {
color: #808080;
font-size:13px;
 padding:1em 0;
}

form.contact td span.supplement02 {
color: #808080;
font-size:13px;
 padding:1em;
}




/* --- フォーム部品 --- */
form.contact input,
form.contact select,
form.contact textarea {
margin-bottom: 2px; /* フォーム部品の下マージン */
}
/* --- フォーム部品のサイズ --- */
/* --- （長めのテキスト入力欄） --- */
#company, #section, #name, #furigana,
#email, #address  {
width: 80%; /* フォーム部品の幅 */
}
#other04 {
width: 18%; /* フォーム部品の幅 */
}
/* --- （短めのテキスト入力欄） --- */
#tel {
width: 60%; /* フォーム部品の幅 */
}
/* --- （短めのテキスト入力欄） --- */
#other {
width: 120px; /* フォーム部品の幅 */
}
#other05 {
width: 110px; /* フォーム部品の幅 */
}
/* --- （短めのテキスト入力欄） --- */
#other02 {
width: 60px; /* フォーム部品の幅 */
}
/* --- （短めのテキスト入力欄） --- */
#other03 {
width: 40px; /* フォーム部品の幅 */
}

/* --- （複数行のテキスト入力欄） --- */
#message {
width: 80%; /* フォーム部品の幅 */
height: 10em; /* フォーム部品の高さ */
}
#remark {
width: 80%; /* フォーム部品の幅 */
height: 10em; /* フォーム部品の高さ */
}

/* --- ボタン --- */
form.contact p.button {
margin: 0;
text-align: center;
}




#contact_free { margin-top:.5em;font-size:26px; font-weight:600; color:#000;}
#contact_free:before {content:"";background:url(../images/company/icon01.png) no-repeat left center;background-size:cover;width:28px;height:26px;display: inline-block; vertical-align:middle; margin:0 .3em 5px;}
#contact_free span {font-size:18px; padding-left:1em; font-weight:500;}
ruby.sample1 {ruby-position:before;}

.contact_form  {width: 100%;margin-bottom: 4px; /* キャプションの下マージン */
padding: 10px 8px; /* キャプションのパディング（上下、左右） */
background: #f9f9f9 ; /* キャプションの背景 */
border: 1px solid; /* キャプションの境界線 */
border-color: #c0c0c0 #999999 #999999 #c0c0c0; /* キャプションの境界線色（上右下左） */
text-align: left;
color: #808080; /* キャプションの文字色 */
}

.contact_form th {
width: 18%; /* 見出しセルの幅 */
padding: 10px 8px; /* 見出しセルのパディング（上下、左右） */
background-color: #e0f1fc; /* 見出しセルの背景色 */
border-bottom: 1px #c0c0c0 dotted; /* 見出しセルの下境界線 */
text-align: left;
line-height: 130%;
font-size:14px;
font-weight: normal;
}

.contact_form td {
padding: 10px 5px 7px; /* データセルのパディング（上、左右、下） */
background-color: #ffffff; /* データセルの背景色 */
border-bottom: 1px #c0c0c0 dotted; /* データセルの下境界線 */
}

.contact_text {font-size:16px; line-height:1.6em; text-align:center;}

/* for table */
#form-tbl {
	margin:2% auto !important; text-align:center;
}
#form {
	border-collapse: collapse;
	margin: 3% auto;
	 width: 80%;
	 font-size:14px;
	  padding:1.5em !important;
}
#form th, #form td {
	border: 1px solid #c0c0c0;
	padding: 1em;
}
#form th {
	white-space: nowrap;
	background: #e0f1fc;
}
#form td {
	background: #fff;
	text-align:left;
}
p.btn input {
	width: 110px;
	height: 32px;
}


/* for message */
p.msg {
	color: #dd0000;
	margin: 2em;
}
span.msg {
	color: #dd0000;
}

/* for back-button */
form.back {
	margin-top: 2em;
}



.contact-form {
	width:95%;
	padding:1%;
	margin:5% auto 2%;
	border: 1px solid #ddd;
	border-radius: 5px;
}

.Form {
	margin-top:3%;
	margin-left: auto;
	margin-right: auto;
	vertical-align: middle !important;
	max-width: 1100px;
	color: #000;
}
.Form p {
	font-size: 0.9rem;
	font-weight: 400;
}
@media screen and (max-width:991.9px) {
  .Form {margin-top: 5%;}
	.contact-form {width:90%;}
}

.Form-Input-area {
	padding-left: 5%;
}

.Form-Item {
  border-bottom: 1px solid #ddd;
  padding-top:16px;
  padding-bottom:16px;
  width: 100%;
  display: flex;vertical-align: middle !important;
  align-items:left !important;
}
.Form-Item02 {
  border-top: 1px solid #ddd;
  padding-top:16px;
  padding-bottom:16px;
  width: 100%;
  vertical-align: middle !important;
  align-items: center;
}
.Form-Item03 {
  border-top: 1px solid #ddd;
  padding-top:16px;
  padding-bottom:16px;
  width: 100%;
  display:inline-block !important;vertical-align: middle !important;
  align-items: center;
}



@media screen and (max-width:991.9px) {
  .Form-Item,.Form-Item02 {
    padding-left: 0px;
    padding-right: 14px;
    padding-top: 12px;
    padding-bottom: 12px;
    flex-wrap: wrap;
  }
  .Form-Item03 {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 12px;
    padding-bottom: 12px;
   display: block;
  }
}


.Form-Item-Label {
  width:24%;padding-top:.6rem;
  letter-spacing: 0.05em;padding-left: 1rem;
  font-weight:600;
  font-size:1.1rem;text-align: left;
}
.Form-Item-Label03 {
  width:30%;padding-top: 16px;
  letter-spacing: 0.05em;display: inline-block;
  font-weight:600;
  font-size:1.4rem;
}
.Form-Item-Label04 {
  width:24%;padding-top: 16px;
  letter-spacing: 0.05em;display: inline-block;
  font-weight:600;
  font-size:1.4rem;
}
@media screen and (max-width:1199.9px) {
.Form-Item-Label {
	width:35%;}
}
@media screen and (max-width:850px) {
.Form-Item-Label03 {
	width:50%;}
}
.Form-Item-Label02 {
  width:100%;padding-top: 16px;
  letter-spacing: 0.05em;
  font-weight:600;
  font-size:1.4rem;
}
.Form-Item-Label02 span {
  font-weight:400;display: block;padding-top: 1rem; padding-left: 1em; text-indent: -1em;
  font-size:1.3rem;
}
.radio_btn { margin-left:5% !important; margin-right:.5% !important;}
.radio_btn00 { margin-left:5% !important; margin-right:.5% !important;}
.radio_btn02 { margin-right:.5% !important;margin-bottom:3% !important;}


@media screen and (max-width:991.9px) {
  .Form-Item-Label {
    max-width: inherit;width:100%;
    display: flex;padding-top: 12px;
    align-items: center;
  }
  .Form-Item-Label03 {
    max-width: inherit;display: block;
    display: flex;padding-top: 12px;
    align-items: center;
  }
  .Form-Item-Label04 {
    max-width: inherit;display: block;
    display: flex;padding-top: 12px;
    align-items: center;
  }

.radio_btn00 {margin-left: 0 !important;}
}


.Form-Item-Label.isMsg {
  margin-top: 8px;
  margin-bottom: auto;
}
@media screen and (max-width:991.9px) {
  .Form-Item-Label.isMsg {
    margin-top: 0;
  }

}
.Form-Item-Label-Required {
  margin-left:1rem;
  padding-top: .2rem;
  padding-bottom: .2rem;
  width:3rem;
  display: inline-block;
  text-align: center;
  background: #d0eaef;
  color: #323232;
  font-size: 0.9rem;
}
@media screen and (max-width: 650px) {
  .Form-Item-Label-Required {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}
.Form-Item-Input {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 48px;
  flex: 1;
  width: 100%;
  background: #eeeeef;
  font-size: 1.1rem;
}

.Form-Item-Input02 {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 48px;
  flex: 1;display: inline-block;
  width: 100%;
  background: #eeeeef;
  font-size: 1.1rem;
}

.Form-Item-Input_s {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 48px;
  flex: 1;
  width: 50% !important;

max-width:400px;   background: #eeeeef;
  font-size: 1.1rem;
}

.Form-Item-Input_ss {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 48px;
  flex: 1;
  width: 20% !important;
max-width:100px;   background: #eeeeef;
  font-size: 1.1rem;
}


@media screen and (max-width:991.9px) {
  .Form-Item-Input {
    margin-left: 0;
    margin-top:1%;
    height: 40px;
    flex: inherit;
  }
  .Form-Item-Input_s {
    margin-left: 0;
    margin-top:1%;
    height: 40px;max-width:none;
    flex: inherit;width:100% !important;
  }
.Form-Item-Input_ss {
  margin-left: 0;
  margin-top:1%;margin-right: 1%;
  height: 40px;
  flex: 1;
flex: inherit;
}
}
.Form-Item-Textarea {
  border: 1px solid #ddd;
  border-radius: 6px; 
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 100px;
  flex: 1;
  width: 100%;
  background: #eeeeef;
  font-size:1.1rem;
}
@media screen and (max-width:991.9px) {
  .Form-Item-Textarea {
    margin-top: 18px;
    margin-left: 0;
    height:80px;
    flex: inherit;
  }
}
.btn {
	text-align: center;
	margin: 5rem auto 1rem;
}
.Form-Btn {
	display: inline-block;
	border: none;
	padding: .5rem 1rem;
	letter-spacing: 0.05em;
	background: #d0eaef;
	color: #323232;
	font-weight: bold;
	transition-duration: 0.3s;
	transition-timing-function: ease;
}
.Form-Btn:hover {
	background-color: #F09F61;
	color: #fff;
}

.supplement {
	margin-top:1rem;
	color: #666;
}

.list {padding-left:1rem;text-indent: -1rem;margin-bottom: -3.5%;margin-top: 0; color: #222222;font-size: 1rem;line-height: 1.6rem;}



/* スマホ用 */
@media only screen and (max-width: 480px) {
/* --- 部品グループ --- */
form.contact div.fields {
margin:5% 0 3% !important; width:98%;}

/* --- テーブル --- */
form.contact table {
width:100% !important; /* テーブルの幅 */ text-align:center !important; margin:100px !important; margin:auto !important;
}

/* --- 見出しセル（th） --- */
form.contact table th {
width:85% !important; display:block; text-align:center !important; margin:auto !important;
}

/* --- データセル（td） --- */
form.contact table td { width:85% !important;display:block; text-align:center !important; margin:auto !important;
}

	
	/* 投稿フォーム */
	#form-tbl { margin: 0 auto; text-align: center; }
	#form { width: 96%; margin: 10px auto;}
    #form th, #form td {
    	text-align: left;
		width: 100%;
        display: block;
        padding: 6px 3px;
        border-top: none;
    }
    #form tr:first-child th	{ border-top: 1px solid #666; }
    p.btn input { width: 10em; }
    

	
	/* サンクス */
	p.msg { margin: 1em auto; }
}


.thanks-area {
	padding: 2rem 3rem;
	border: 1px solid #ddd;
	border-radius: 5px;
}
.thanks-text01 {
	font-size: 1.2rem;
	line-height: 1.5;
}
.thanks-text02 {
	font-size: 0.8rem;
	margin-top: 3rem;
}


/*　PCの時、改行　*/
.br-pc {
	display: block;
}
@media screen and (max-width:600px) {
.br-pc {
	display: none;
}
}

/*　SPの時、改行　*/
.br-sp {
	display: none;
}
@media screen and (max-width:600px) {
.br-sp {
	display: block;
}
}


/* ページTOPボタン */

.pagetop {
    display: none;
    position: fixed;
    bottom:1%;
    right: 15px;
}
.pagetop a {
	display: inline-block;
	text-decoration: none;
	background: #64b8cb;
	width: 75px;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
	transition: .4s;
}

 .pagetop a img { width:80%; margin:auto; padding:10% 5%;}
.pagetop a:hover {
    background: #f39800;
}
 .pagetop a img:hover { opacity:7;}
 


/* Instagram snap_area */
.snap_area {
	margin-top:5%;
	text-align: center;
}
.snap_area span.mask{
  position:relative;/*背景色の基点となる位置を定義*/
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}

.snap_area span.mask::before{
  content:"";
  position: absolute;
  z-index: 2;
  left:0;
  top:0;
  opacity:0;/*透過0*/
  transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
    transform: translateY(100%);
  background:rgba(63, 57, 57, 0.7); 
  width:100%;
  height: 100%; 
}

.snap_area:hover span.mask::before{/*hoverした時の変化*/
  opacity:1;/*透過なしに変化*/
  transform: translateY(0);
}

.snap_area span.cap{/*画像の上のテキスト*/
  position: absolute;
  opacity:0;/*透過0*/
  transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
  z-index:3;/*テキストを前面に出す*/
  top: 50%;
    left: 50%;font-size:1.5rem;
  transform: translate(-50%,-50%);/*テキストの位置中央指定*/
  color: #fff;/*テキストの色を変えたい場合はここを修正*/
    line-height: 1.5;/*行の高さを1.5にする*/
}

.snap_area:hover span.cap{/*hoverした時の変化*/
  opacity:1;/*透過なしに変化*/
}
@media screen and (max-width:900px){
	.snap_area {
		height: 700px!important;
	}
	.snap_area span.mask::before{
		width: 100%;
		height: 580px!important;
	}
}
@media screen and (max-width:800px){
	.snap_area {
		height: 600px!important;
	}
	.snap_area span.mask::before{
		width: 100%;
		height: 560px!important;
	}
}
@media screen and (max-width:700px){
	.snap_area {
		height: 500px!important;
	}
	.snap_area span.mask::before{
		width: 100%;
		height:500px!important;
	}
	.snap_area span.cap{/*画像の上のテキスト*/
	  top: 30%;
	}
}
@media screen and (max-width:600px){
	.snap_area {
		height: 400px!important;
	}
	.snap_area span.mask::before{
		width: 100%;
		height:400px!important;
	}
}
@media screen and (max-width:500px){
	.snap_area {
		height: 300px!important;
	}
	.snap_area span.mask::before{
		width: 100%;
		height:300px!important;
	}
}

#wrap {overflow-x:hidden !important;}