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

body {
font-size: 1rem;
}

/*ヘッダー
─────────────────────────────────────*/
header {
margin: 0 auto;
width: 960px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
#logo {
margin: 1rem 0;
text-align: center;
}
.header_right {
line-height: 1.5;
font-size: 0.875rem;
color: #4476AC;
}
.header_right p {
margin: 0;
text-align: right;
}
.header_right p.header_tel {
margin: 0 -5px 0 0;
font-size: 1.75rem;
letter-spacing: 5px;
}
.header_tel:before {
content: "\f095";
font-weight: 900;
margin-right: 0.5rem;
font-family: 'Font Awesome 5 Free';
}

/*グローバルナビゲーション
─────────────────────────────────────*/
#nav,
#nav_open,
#global_navi label {
display: none;
}
#global_navi {
background: #000;
background: url("/img/back01.png");
}
nav ul {
margin: 0 auto;
width: 960px;
display: flex;
}
nav ul li {
border-left: 1px solid #FFF;
font-size: 0.875rem;
line-height: 1;
letter-spacing: 2px;
flex: 1 1 auto;
}
nav ul li:last-child {
border-right: 1px solid #FFF;
}
nav ul li a {
color: #FFF;
display: block;
padding: 1rem;
text-decoration: none;
text-align: center;
}
nav ul li a:hover {
color: #FFF;
background: url("/img/back01_hover.png");
}

/*アイキャッチ
─────────────────────────────────────*/
#eye_catch_container {
background: url("/img/back02.png");
position: relative;
z-index: -2;
}
#eye_catch_back {
background: url("/img/eye_catch_back.jpg");
background-size: cover;
background-position: center center;
position: relative;
z-index: -2;
}
#eye_catch {
margin: 0 auto;
width: 960px;
height: 500px;
background: url("/img/eye_catch_pc.jpg");
background-size: cover;
background-position: center center;
}

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

/*コンテナ
─────────────────────────────────────*/
#contents_container {
margin: 0 auto;
padding: 3rem 0 5rem 0;
width: 960px;
}

/*コンテンツ
─────────────────────────────────────*/
h2,
h3 {
margin: 3rem 0 2rem 0;
}
h2 {
padding: 2% 0;
font-size: 1.8rem;
letter-spacing: 5px;
text-align: center;
}
h2.title {
padding: 10px 0 7px 1rem;
font-size: 1.125rem;
letter-spacing: 5px;
}
h4 {
margin: 3rem 0 1rem 0;
font-size: 1.625rem;
letter-spacing: 3px;
}
.box_gray {
padding: 2rem;
}
.box_pink {
padding: 2rem;
}
table th {
padding: 1rem 1.5rem;
}
table td {
padding: 1rem;
}
#contents_container ul {
margin: 1rem 0 1rem 3rem;
}
#contents_container ul.checkbox {
padding: 2rem 0;
font-size: 1.5rem;
}
#contents_container ul.checkbox li {
background: url("/img/checkbox.png") no-repeat left 0;
padding: 5px 0 0 3.6rem;
}
#contents_container ul.checkbox li+li {
margin-top: 1rem;
}


/*ごあいさつ
─────────────────────────────────────*/
.aisatsu {
display: flex;
}
.aisatsu img {
margin-right: 1rem;
}

/*特徴
─────────────────────────────────────*/
.tokucho {
margin: 3rem 0;
display: flex;
}
.tokucho img {
margin-right: 1rem;
width: 300px;
}
.tokucho h4 {
margin-top: 0;
}



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

/*ギャラリー
─────────────────────────────────────*/
.gallery_2column,
.gallery_3column {
margin: -2rem 0 0 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.gallery_2column img,
.gallery_3column img {
max-width: 100%;
}
.gallery_2column .column {
width: 450px;
margin: 2rem 0 0 0;
}
.gallery_3column .column {
width: 300px;
margin: 2rem 0 0 0;
}
.gallery_2column .column:empty,
.gallery_3column .column:empty {
margin: 0;
}
.gallery_2column .column img + img,
.gallery_3column .column img + img {
margin: 2rem 0 0 0;
}
.gallery_2column div p:last-child,
.gallery_3column div p:last-child {
margin-bottom: 0;
}

/*会社情報
─────────────────────────────────────*/
.google_map {
margin: 3rem 0 0 0;
height: 600px;
}

/*CTA
─────────────────────────────────────*/
.cta {
padding: 3rem 1rem;
}
.cta p.catchcopy {
font-size: 2rem;
letter-spacing: 10px;
}
.cta p.company_name {
font-size: 1.5rem;
letter-spacing: 5px;
font-weight: bold;
}
.cta p.tel {
font-size: 2rem;
letter-spacing: 5px;
}
.cta p.tel a[href^="tel:"] {
pointer-events: none;
text-decoration: none;
color: #4476AC;
}
.cta p.mail a {
margin: 1rem auto 2rem auto;
padding: 1rem 8rem;
font-size: 1rem;
letter-spacing: 8px;
}

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