@import url("/common.css");

html {
-webkit-text-size-adjust: 100%;
}
body {
font-size: 0.875rem;
}
img {
margin: 1rem auto;
width: initial !important;
max-width: 100%;
object-fit: contain;
height: auto;
display: block;
box-sizing: border-box;
}

/*ヘッダー
─────────────────────────────────────*/
header {
border-bottom: 1px solid #4476AC;
}
#logo {
margin: 0.5rem 0;
text-align: center;
}
#logo img {
display: inline-block;
zoom: 0.5;
}
.header_right {
display: none;
}

/*グローバルナビゲーション
─────────────────────────────────────*/
nav {
font-size: 0.875rem;
line-height: 1;
letter-spacing: 2px;
}
#nav {
display: none;
}
#nav_open {
position: fixed;
top: 20px;
right: 20px;
display: inline-block;
font-size: 1.5rem;
line-height: 0;
color: #FFF;
background: rgba(68,118,172,0.7);
padding: 10px;
}
#nav_back {
display: none;
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}
#global_navi {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 80vw;
min-width: 300px;
height: 100vh;
background: #FFF;
transition: .3s ease-in-out;
transform: translateX(-105%);
}
#nav:checked ~ #nav_back {
display: block;
opacity: 0.5;
}
#nav:checked ~ #global_navi {
transform: translateX(0%);
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
#global_navi label {
display: block;
padding: 1rem;
color: #333;
border-bottom: 1px solid #4476AC;
}
nav ul li {
color: #333;
border-bottom: 1px solid #4476AC;
}
nav ul li a {
color: #333;
display: block;
padding: 1rem;
text-decoration: none;
}

/*アイキャッチ
─────────────────────────────────────*/
#eye_catch {
margin: 0 auto;
padding-bottom: calc(1125/900*100%);
background: url("/img/eye_catch_sp.jpg");
background-size: cover;
background-position: center center;
}

/*コンテナ
─────────────────────────────────────*/
#contents_container {
padding: 2rem 10px;
}

/*ページタイトル
─────────────────────────────────────*/
.page_title {
padding: 1rem 0;
font-size: 1rem;
letter-spacing: 5px;
}
.page_title i {
transform: translateY(8px);
}

/*コンテンツ
─────────────────────────────────────*/
h2 {
margin: 3rem 0 1.5rem 0;
padding: 3% 0;
font-size: 1.125rem;
letter-spacing: 2px;
font-weight: 500;
}
#contents_container h2.title {
margin:3rem -10px 2rem -10px;
padding: 10px 0;
font-size: 1rem;
letter-spacing: 3px;
text-align: center;
}
h3 {
margin: 2rem 0 1.5rem 0;
}
h4 {
margin: 3rem 0 1rem 0;
font-size: 1.125rem;
letter-spacing: 3px;
line-height: 1;
text-align: center;
}
#contents_container ul {
margin: 1rem 0 1rem 1.5rem;
}
#contents_container ul.checkbox {
font-size: 1rem;
}
#contents_container ul.checkbox li {
background: url("/img/checkbox.png") no-repeat left 0;
background-size: 30px auto;
padding: 3px 0 0 2.2rem;
}
.box_gray {
padding: 10px;
}
.box_pink {
padding: 10px;
}
table th {
padding: 10px;
}
table td {
padding: 10px;
}


/*特徴
─────────────────────────────────────*/
.tokucho {
margin: 3rem 0;
}
.tokucho img {
margin: 1rem auto;
}
.tokucho h4 {
margin-top: 2rem;
}


/*FAQ
─────────────────────────────────────*/
.question {
padding: 2rem 0 0 0;
background: url("/img/faq_q.png") no-repeat 0 15px;
background-size: 35px auto;
font-weight: bold;
text-indent: 2.5rem;
}
.answer {
padding: 1rem 0 0.5rem 0;
background: url("/img/faq_a.png") no-repeat 0 0;
background-size: 35px auto;
text-indent: 2.5rem;
}
.answer + .question {
border-top: 2px dotted #CCC;
}

/*ギャラリー
─────────────────────────────────────*/
.gallery_2column div img,
.gallery_3column div img {
margin: 2rem auto 1rem auto;
}
.gallery_2column div:first-child,
.gallery_3column div:first-child {
margin-top: -1rem;
}

/*会社情報
─────────────────────────────────────*/
.company th {
padding: 10px;
}
.company td {
padding: 10px;
}
.google_map {
margin: 2rem 0 0 0;
height: 300px;
}
.google_map iframe {
border: none;
width: 100%;
height: 100%;
}

/*CTA
─────────────────────────────────────*/
.cta {
padding: 2rem 0;
}
.cta p.catchcopy {
font-size: 1rem;
letter-spacing: 5px;
}
.cta p.company_name {
letter-spacing: 3px;
font-weight: bold;
}
.cta p.tel a {
display: block;
margin: 2rem 10px 1rem 10px ;
padding: 1rem;
border-radius: 5px;
background: #4476AC;
border: 1px solid #FFF;
color: #FFF;
letter-spacing: 5px;
text-shadow: none;
text-decoration: none;
}
.cta p.mail a {
margin: 1rem 10px ;
padding: 1rem;
display: block;
letter-spacing: 5px;
}

/*フッター
─────────────────────────────────────*/
footer {
font-size: 0.75rem;
}