@charset "UTF-8";
/* Reset */
body, div, section, article, aside, nav,
h1, h2, h3, h4, h5, h6,
span, time, figure, figcaption,
p, blockquote, pre, address, code,
dl, dt, dd, ol, ul, li,
fieldset, form, legend, button,
table, tbody, thead, tfoot, tr, th, td{ margin: 0; padding: 0; line-height: 1.5; }
h1,h2,h3,h4,h5,h6,th,td,small{ font-size:100%; }
ul,ol{ list-style: none; }
img{ border: 0; vertical-align: bottom; max-width: 100%; }
table{ border-collapse: collapse; }

input,select{ vertical-align: middle; }
em{ font-style: normal; }
button{ background:none; border: none; }

/* Basic */

@font-face {
font-family: 'Gill Sans';
src: url('/common/fonts/GillSans.eot');
src: url('/common/fonts/GillSans.eot?iefix') format('embedded-opentype'),url('/common/fonts/GillSans.woff') format('woff'),url('/common/fonts/GillSans.ttf') format('truetype');
}

@font-face {
font-family: 'Palatino';
src: url('/common/fonts/Palatino.eot');
src: url('/common/fonts/Palatino.eot?iefix') format('embedded-opentype'),url('/common/fonts/Palatino.woff') format('woff'),url('/common/fonts/Palatino.ttf') format('truetype');
}

body{ font-family: 'Gill Sans'; background: #eaf8fa; }

a:link{ color: #00adc8; }
a:visited{ color: #00adc8; }
a:hover{ color: #00adc8; }
a:active{ color: #00adc8; }

.forsp{ display:none; }

/* Header */
header{ height: 740px; position: relative; background: url("/img/mainvisual_01.jpg") no-repeat 50% 50%; margin: 0 0 60px; box-shadow: 0 5px 5px rgba(0,0,0,0.1); }
header h1{ position: absolute; top: 50%; left: 50%; margin-top: -60px; margin-left: -160px; }
header h1 img{ width:320px; }
header ul#gmn{ position: absolute; bottom: 80px; left: 0; width: 100%; text-align: center; }
header ul#gmn li{ display: inline-block; margin: 0 20px; }
header ul#gmn li a{ font-size: 18px; color: #FFF !important; text-decoration:none !important; }
header ul#sns{ position: absolute; bottom: 160px; left: 0; width:100%; text-align: center; }
header ul#sns li{ display: inline-block; margin: 0 20px; }
header ul#sns li a{  }
header ul#sns li a img{ width:32px; }
header ul#lang { position: absolute; top: 20px; right: 20px; display: flex; }
header ul#lang li { width: 35px; height: 35px; margin-left: 10px; }
header ul#lang li a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #fff; text-decoration: none; border-radius: 50%; transition: .5s; }
header ul#lang li a:hover { background: #00adc8; color: #fff; }
header ul#lang li a.active { background: #00adc8; color: #fff; }

main{ max-width:1000px; margin:0 auto; }

.section{ padding: 60px 0 1px; margin: 0 20px 60px; box-shadow: 5px 5px 5px rgba(0,0,0,0.1); text-align:center; background:#FFF; }
.section h2{ font-size:20px; margin:0 40px 40px; color:#00adc8; }
.section h2 span{ display:inline-block; padding:0 10px 5px; border-bottom: 1px solid #00adc8; }
.section h3{ font-size:24px; font-family: 'Palatino'; line-height:2; color:#62402a; margin:0 40px 40px; }
.section h3 span{ display:block; padding-top:10px; font-size:18px; }
.section p{ font-size:16px; color: #3e3a39; line-height:2; margin:0 40px 30px; }

/* Philosophy */
#philosophy p{ font-size: 18px; }
#philosophy p:last-child{ margin:0; padding: 0 0 60px; line-height:1.75; }

/* Message */
#message.section{ padding-bottom:0; }
#message.section h3 span{ color:#FFF; font-family:'Gill Sans'; }
#message p{ color:#FFF; }
#message > div{ padding: 0 0 20px; background: url("/common/img/bg_section.jpg") 50% 50%; }
#message > div.msg02{ padding:0; }
#message > div > div{ display:table; width:100%; height:400px; background-size:cover; margin:0 0 40px; }
#message div.msg01 > div{ background:url("/img/bg_message_01.jpg") 50% 50%; background-size:cover; }
#message div.msg02 > div{ background: url("/img/bg_message_02.jpg") 50% 50%; background-size:cover; margin: 0; }
#message > div > div h3{ display: table-cell; vertical-align: middle; color:#FFF; }

/* Concept */
#concept.section > img{ width:400px; margin-bottom:80px; }
#concept.section p:last-child{ magin:0; padding: 0 0 60px; }
#concept.section h2,#concept.section h3{ margin-bottom:60px; }

/* Mission */
#mission.section ol{ list-style:decimal; text-align:left; padding-left:50px; padding-right:30px; padding-bottom:45px; }
#mission.section ol li{ margin-bottom:15px; color:#3e3a39; }
#misson.section p{ text-align:left; }

/* About us */
#aboutus.section dl{ text-align:left; border-bottom:1px solid #DDD; margin:0 40px 60px; }
#aboutus.section dl dt{ display:inline-block; border-top:1px solid #DDD; vertical-align:top; width:25%; color:#727171; padding:15px 0; }
#aboutus.section dl dd{ display:inline-block; border-top:1px solid #DDD; vertical-align:top; width:75%; color:#3e3a39; padding:15px 0; }
#aboutus.section p{ text-align:left; }

/* Footer */
footer{
box-shadow: 0 -5px 5px rgba(0,0,0,0.1);
text-align:center; margin:0; padding:20px; background:#3e3a39; color:#FFF; }

/* PageTop */
#pt{ position:fixed; bottom:15px; right:15px; width:32px; height:32px; }

@media screen and (max-width: 768px) {
header{ margin-bottom:40px; }
.section h2{ font-size:16px }
.section h2{ font-size:16px; margin: 0 30px 30px; }
.section h3{ font-size:18px; margin: 0 30px 30px; }
.section h3 span{ font-size:14px; }
.section{ padding-top: 40px; margin-bottom: 40px; }
.section p{ font-size:14px; margin: 0 30px 20px; }
#philosophy p{ font-size: 14px; }
#philosophy p:last-child{ padding: 0 0 40px; }
#aboutus.section dl{ font-size:14px; }
#aboutus.section img{ width:30%; float: right; }
#mission.section ol{ font-size:14px; padding-bottom:35px; }
#concept.section p:last-child{ padding: 0 0 40px; }
#aboutus > div:last-child div{ min-height:auto; }
#aboutus.section dl{ margin:0 40px 40px; }
}

@media screen and (max-width: 480px) {
.forsp{ display:inline; }
header{ height: 480px; }
header h1{ margin-top: -45px; margin-left: -120px; }
header h1 img{ width: 240px; }
header ul#gmn{ bottom: 60px; }
header ul#gmn li{ display: inline-block; margin: 20px 5px 0; }
header ul#gmn li a{ font-size: 14px; }
header ul#sns{ position: absolute; bottom: 120px; }
header ul#sns li{ display: inline-block; margin: 0 15px; }
header ul#sns li a img{ width:24px; }
.section h2{ margin: 0 20px 30px; }
.section h3{ margin: 0 20px 30px; }
.section p{ margin: 0 20px 20px; }
#concept.section > img{ width:80%; }
#message > div > div{ height:280px; background-size:cover !important; }
#mission.section ol{ padding-left:40px; padding-right:20px; }
#aboutus.section dl{ margin:0 20px 40px; }
#aboutus.section dl dt{ display:block; border-top:1px solid #DDD; width:auto; padding:15px 0 5px; }
#aboutus.section dl dd{ display:block; border-top:0; width:auto;padding:0 0 15px; }
footer{ font-size:12px; }
}