@charset "utf-8";
@import "font-awesome.css";
@font-face {
	font-family: 'Noto Serif Japanese';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/NotoSerifJP/NotoSerifJP-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Noto Serif Japanese';
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/NotoSerifJP/NotoSerifJP-SemiBold.woff') format('woff');
}
@font-face {
	font-family: 'Noto Serif Japanese';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/NotoSerifJP/NotoSerifJP-Bold.woff') format('woff');
}

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

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;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
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;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

li { list-style: none;}
*,
*::before,
*::after {box-sizing: border-box; letter-spacing: 0.03em;}
img {vertical-align: top;}
main, article, section {display: block;}

/* ----------------------------------------

- MODULE

---------------------------------------- */

/* clearfix
---------------------------------------- */
.clearfix:after {content: ""; display: block; clear: both;}
.clearfix:before {content: ""; display: block; clear: both;}
.clearfix {display: block;}

/* tel
---------------------------------------- */
.pc a[href^="tel:"]{cursor:default; text-decoration:none; pointer-events:none;}

/* btn_01
---------------------------------------- */
.btn_01 {display: inline-block; border: 1px solid #cdcdcd; min-width: 140px; height: 36px; line-height: 34px; letter-spacing: .15em; font-size: 12px; font-size: 1.2rem; position: relative; padding: 0 22px; text-align: center;}
.ie .btn_01 {line-height: 37px;}
.btn_01 span{display: inline-block; position: relative; z-index: 2;  -webkit-transition: .2s; transition: .2s;}
.pc .btn_01:hover span{color: #fff;}
.btn_01:before {content: "\f105"; font-family: FontAwesome; position: absolute; right: 8px; top: 50%; z-index: 2; -webkit-transition: .2s; transition: .2s; -webkit-transform: translate(0, -50%); transform: translate(0, -50%);}
.btn_01_back:before {content: "\f104"; right: auto; left: 8px;}
.pc .btn_01:hover:before {color: #fff;}
.btn_01:after {content: ""; display: inline-block; width: 100%; height: 100%; background: #222; position: absolute; left: 0; top: 0; transform:scaleX(0); transform-origin: left; z-index: 1;}
.pc .btn_01:after {animation: anim-out .2s ease-out forwards;}
.pc .btn_01:hover:after {animation: anim .2s ease-out forwards;}

@keyframes anim {
	0% {transform: scaleX(0);}
	100% {transform: scaleX(1);}
}
@keyframes anim-out {
	0% {opacity: 1;transform: scaleX(1);}
	99% {opacity: 0;transform: scaleX(1);}
	100% {opacity: 0;transform: scaleX(0);}
}

/* boxw_01
---------------------------------------- */
.boxw_01 {padding-left: 3.33%; padding-right: 3.33%;}

/* boxw_02
---------------------------------------- */
.boxw_02 {margin-left: auto; margin-right: auto; max-width: 1000px; display: block;}


/* wp_page_numbers
----------------------------------------------------- */
#wp_page_numbers ul {text-align: center; position: relative; font-size: 0px; margin: 0 -5px;}
#wp_page_numbers ul li {display: inline-block; margin: 0 5px; font-size: 15px; font-size: 1.5rem;}
#wp_page_numbers ul li a{display: block; background: #fff; width: 34px; height: 34px; border: 1px solid #cdcdcd; line-height:32px; text-decoration:none; opacity:1!important;}
.ie #wp_page_numbers ul li a {line-height: 35px;}
#wp_page_numbers ul li a:hover{color: #aaa;}
#wp_page_numbers ul li.active_page a{color: #fff!important; background: #0d2f00; border-color: #0d2f00; border:none;}


span.page-numbers.current {
    background-color: #0d2f00;
    color: white;
    padding: 10px 13px;
    margin-right: 10px;
}
#wp_page_numbers .page-numbers.dots {
    line-height: 35px;
    margin-right: 10px;
}
#wp_page_numbers a.page-numbers {
    background-color: white !important;
    padding: 10px 13px;
    border: solid 1px #ccc;
    margin-right: 10px;
	transition: .3s;
	opacity: 1;
}

#wp_page_numbers a.page-numbers:hover {
	opacity: 0.5;
}

div#wp_page_numbers {
    display: flex !important;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

/* ----------------------------------------

- FORMAT

---------------------------------------- */
html{font-size: 62.5%; width: 100%; height: 100%; background: url(../images/common/bg01.png) repeat; background-size: 200px 200px; overflow-y: scroll; overflow-x: hidden;}
body{color: #000; font-size: 13px; font-size: 1.3rem; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", 'Noto Serif Japanese', serif; font-feature-settings: "palt"; font-weight: 400; position: relative; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; text-rendering: auto; width: 100%; height: 100%;}
a{text-decoration: none; outline: none; color: #000;}
a img{box-shadow: #000 0 0 0;}
._isPC{display: block!important;}
img._isPC{display: inline-block!important;}
._isSP{display: none!important;}
@media screen and (max-width:768px){
	._isPC,
	img._isPC{display: none!important;}
	._isSP{display: block!important;}
	img._isSP{display: inline-block!important;}
}

/* .wrapper
----------------------------------------------------- */
.wrapper{width: 100%; height: 100%;}


/* .header
----------------------------------------------------- */
.header {width: 100%; height: 100%; z-index: 5; background: rgba(0, 0, 0, .9); position: fixed; text-align: center; top: 0; display: none;}
.header a {color: #fff;}
.header-in {width: 100%; height: 100%; position: relative;}
.header-in-nav {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.header-in-nav-site {width: 240px;}
.header-in-nav-site li {border-bottom: 1px solid #666;}
.header-in-nav-site li a {display: block; height: 60px; line-height: 60px; font-size: 15px; font-size: 1.5rem; letter-spacing: .15em; -webkit-transition: .2s; transition: .2s;}
.header-in-nav-social {font-size: 0; margin: 20px -10px 0;}
.header-in-nav-social li {display: inline-block; margin: 0 15px;}
.header-in-nav-social li a {font-size: 26px; font-size: 2.6rem; -webkit-transition: .2s; transition: .2s;}
.header-in-nav-social li a i img {vertical-align: middle; padding-bottom: 4px}
.pc .header-in-nav-site li a:hover,
.pc .header-in-nav-social li a:hover {opacity: .5;}

/* btnToggleNav
----------------------------------------------------- */
.btnToggleNav {display: block; width: 40px; height: 19px; position: fixed; right: 3.33%; top: 50px; z-index: 10;}
.btnToggleNav a {display: block; width: 100%; height: 100%; opacity: 1!important;}
.btnToggleNavLineWrap{width: 100%; height: 100%; position: relative; opacity: 0;}
.btnToggleNavLineWrap span{display: block; width: 100%; height: 1px; background: #fff; position: absolute; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;}
.btnToggleNavLineWrap.on{opacity: 1;}
.btnToggleNavLineWrap.wh span{background: #fff;}
.btnToggleNavLineWrap.bl{top: -19px;}
.btnToggleNavLineWrap.bl span{background: #000;}
.active .btnToggleNavLineWrap.wh{opacity: 0!important;}
.active .btnToggleNavLineWrap.bl{opacity: 1!important;}
.btnToggleNavLine01{top: 0;}
.btnToggleNavLine02{top: 9px;}
.btnToggleNavLine03{bottom: 0;}
.active .btnToggleNavLine01{transform: rotate(-225deg); -webkit-transform: rotate(-225deg); background: #fff!important; top: 9px;}
.active .btnToggleNavLine02{opacity: 0;}
.active .btnToggleNavLine03{transform: rotate(225deg); -webkit-transform: rotate(225deg); background: #fff!important; bottom: 9px;}

@media screen and (max-width:768px){
    .btnToggleNav{top: calc(100vw * .033); width: 32px;}
}

/* .main
----------------------------------------------------- */
.main {position: relative; z-index: 1;}

/* .footer
----------------------------------------------------- */
.footer {background: #222; padding: 60px 3.33% 0; color: #fff; position: relative; z-index: 1;}
.footer a {color: #fff; -webkit-transition: .2s; transition: .2s;}
.pc .footer a:hover {opacity: .5;}
.footer-row01 {border-bottom: 1px solid #404040; padding-bottom: 45px;}
.footer-row01 h2 {float: left; margin-right: 45px;}
.footer-row01 h2 a {opacity: 1!important;}
.footer-row01 h2 img {width: 193px; height: 67px;}
.footer-row01 ul {float: left;}
.footer-row01 ul li {float: left; border-left: 1px solid #404040; padding-left: 15px;}
.footer-row01 ul li:first-of-type {margin-right: 20px;}
.footer-row01 ul li h3 {font-size: 14px; font-size: 1.4rem; font-weight: 400; letter-spacing: .15em; margin-bottom: 5px;}
.footer-row01 ul li address {font-style: normal; line-height: 1.65;}
.footer-row01 ul li span {display: inline-block; padding-left: 18px;}
.footer-row01 ul li span a {text-decoration: underline}
.footer-row01 ul li span a:hover {text-decoration: none}
.footer-row01 .banner {float: right;}
.footer-row02 {height: 65px; position: relative; overflow: hidden;}
.footer-row02 ul {position: absolute; left: 0; top: 0; font-size: 0;}
.footer-row02 ul li {display: inline-block; line-height: 65px; margin-right: 20px;}
.footer-row02 ul li a {font-size: 13px; font-size: 1.3rem; letter-spacing: .07em;}
.footer-row02 ul li a i {font-size: 20px; margin-right: 7px; vertical-align: -1px;}
.footer-row02 ul li a i img {vertical-align: middle; padding-bottom: 2px}
.footer-row02 .banner{display: none;}
.footer-row02 .copy {text-align: center; line-height: 65px; font-size: 10px; font-size: 1.0rem;}
.footer-row02 .copy br{display: none;}
.footer-row02 .pagetop {position: absolute; right: 0; top: 0; line-height: 65px;}
.footer-row02 .pagetop a {font-size: 12px; font-size: 1.2rem;}
.footer-row02 .pagetop a i {font-size: 14px; font-size: 1.4rem; margin-left: 5px;}
@media screen and (max-width:1024px){
	.footer {padding-top: 30px; text-align: center;}
	.footer-row01 {border-bottom: none; padding-bottom: 0;}
	.footer-row01 h2 {float: none; margin-right: 0; border-bottom: 1px solid #404040; padding-bottom: 15px;}
    .footer-row01 h2 img {width: 175px; height: 60px;}
	.footer-row01 ul {float: none;}
	.footer-row01 ul li {float: none; border-left: none; padding-left: 0; border-bottom: 1px solid #404040; padding-top: 15px; padding-bottom: 15px;}
	.footer-row01 ul li:first-of-type {margin-right: 0;}
	.footer-row01 ul li span {display: block; line-height: 1.65; padding-top: 10px; padding-left: 0;}
	.footer-row01 .banner {display: none;}
	.footer-row02 {height: auto; padding-top: 15px; overflow: visible;}
	.footer-row02 ul {position: static; margin-bottom: 15px;}
	.footer-row02 ul li {line-height: 1; margin: 5px 7px;}
	.footer-row02 .banner{display: block; margin-bottom: 15px;}
	.footer-row02 .copy {text-align: center; line-height: 1.3; margin-bottom: 15px; position: relative;}
	.footer-row02 .copy br{display: block;}
	.footer-row02 .pagetop {position: static; line-height: 1;}
	.footer-row02 .pagetop a {font-size: 12px; font-size: 1.2rem; display: block; height: 42px; line-height: 42px; background: #444; margin: 0 -3.33%;}
}


/* ----------------------------------------

- INDEX

---------------------------------------- */
/* index-mv
---------------------------------------- */
.index-mv {position: relative; width: 100%; height: 100%; overflow: hidden; z-index: 2; background: #000;}
.index-mv video{position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; z-index: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0;}
.index-mv-logo{position: absolute; top: 50%; left: 50%; -webkit-transform: rotate(0.1deg) translate(-50%, -50%); transform: rotate(0.1deg) translate(-50%, -50%); z-index: 2; opacity: 0; filter:blur(10px); -webkit-transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);  transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);}
.index-mv-logo.active {padding-top: 0; opacity: 1; filter:blur(0px);}
.index-mv-logo img {width: 244px; height: 84px;}
@media screen and (max-width:768px) {
    .index-mv-logo img {width: 183px; height: 63px;}
}

/* index-news
---------------------------------------- */
.index-news {padding-top: 80px; padding-bottom: 80px;}
.index-news-in {position: relative;}
.index-news h2 {font-size: 17px; font-size:1.7rem; text-align: center; margin-bottom: 35px;}
.index-news h2 span {border-bottom: 1px solid #0d2f00; display: inline-block; letter-spacing: .25em; padding-bottom: 13px; font-weight: 400;}
.index-news-list {display: flex; flex-wrap: wrap; margin: 0 -1.75%;}
.index-news-list article{width: 33.333%; padding: 0 1.75%; margin-bottom: 17px;}
.index-news-list article a {display: block; padding-bottom: 15px; border-bottom: 1px solid #cdcdcd;}
.index-news-list article a header {line-height: 1.3; font-weight: 400; margin-bottom: 6px; -webkit-transition: .2s; transition: .2s;}
.index-news-list article a h3 {font-weight: 400; line-height: 1.5; -webkit-transition: .2s; transition: .2s;}
.pc .index-news-list article a:hover header,
.pc .index-news-list article a:hover h3{opacity: .5;}
.index-news-list article:nth-of-type(4),
.index-news-list article:nth-of-type(5),
.index-news-list article:nth-of-type(6){margin-bottom: 0;}
.index-news-list article:nth-of-type(4) a,
.index-news-list article:nth-of-type(5) a,
.index-news-list article:nth-of-type(6) a {padding-bottom: 0; border: none;}
.index-news .btn {position: absolute; right: 0; top: 10px;}
.index-news .btn a {font-size: 12px; font-size: 1.2rem; -webkit-transition: .2s; transition: .2s; padding: 0 15px;}
.index-news .btn a i {margin-left: 7px;}
.pc .index-news .btn a:hover {opacity: .5;}
@media screen and (max-width:768px) {
    .index-news {padding-top: 40px; padding-bottom: 40px;}
    .index-news h2 {margin-bottom: 25px;}
    .index-news-list {display: block; margin: 0;}
    .index-news-list article{width: 100%; padding: 0; margin-bottom: 13px!important;}
    .index-news-list article a {padding-bottom: 12px!important; border-bottom: 1px solid #cdcdcd!important;}
    .index-news .btn {position: static; text-align: right; margin-top: 20px;}
}

/* index-notice
---------------------------------------- */

.index-notice {
    margin-top: 50px;
    background-color: #f9f9f9;
    padding: 30px;
    padding-top: 10px;
	border: dotted 1px #d0d0d0;
}

.index-notice h3 {
    font-weight: bold;
    background-color: #f9f9f9;
    text-align: center;
    padding: 15px;
    border-bottom: solid 1px #eaeaea;
    font-size: 14px;
    /* font-weight: bold; */
}

.index-notice p {
    margin-top: 30px;
    line-height: 2;
}

.index-notice a {
    margin-top: 20px;
    display: block;
    text-align: center;
    width: 240px;
    margin-left: auto;
    margin-right: auto;
    background-color: #e6e6e6;
    padding: 15px;
    transition: .3s;
    font-size: 12px;
}

.index-notice a:hover{
	opacity: 0.7;
}

.fa-caret-right:before {
    content: "\f0da";
    position: relative;
    left: 10px;
}

@media screen and (max-width:768px) {

.index-notice {
    padding: 5px 15px 20px 15px;
}

}


/* index-about
---------------------------------------- */
.index-about-fig {width: 100%; height: 500px; background: url("../images/index/about-img.jpg") no-repeat center center; background-size: cover; background-attachment: fixed;}
.index-about-in {text-align: center; padding-top: 80px; padding-bottom: 80px;}
.index-about-in h2 {font-size: 17px; font-size:1.7rem; text-align: center; margin-bottom: 35px;}
.index-about-in h2 span {border-bottom: 1px solid #0d2f00; display: inline-block; letter-spacing: .25em; padding-bottom: 13px; font-weight: 400;}
.index-about-in h3 {font-size: 16px; font-size: 1.6rem; letter-spacing: .15em; line-height: 1.7; font-weight: normal; margin-bottom: 10px;}
.index-about-in p {line-height: 1.85; margin-bottom: 20px; letter-spacing: .15em;}
.index-about-in-btn {display: flex; justify-content: center; align-items: center;}
.index-about-in-btn li {margin: 0 5px;}
.index-about-in-btn li .btn_01 {min-width: 150px;}

@media screen and (max-width:768px) {
    .index-about figure {height: auto; padding-top: 56.25%; background-attachment: scroll; background-position: center center!important;}
    .index-about-in {padding-top: 40px; padding-bottom: 40px;}
    .index-about-in h2 {margin-bottom: 20px;}
}
@media screen and (max-width:340px) {
    .index-about-in-btn {display: block;}
    .index-about-in-btn li:first-of-type {margin: 0 0 10px;}
}

/* index-menu
---------------------------------------- */
.index-menu {background: url("../images/common/bg02.png") repeat; background-size: 200px 200px;}
.index-menu-sec {height: 433px; position: relative;}
.index-menu-sec figure{width: 50%; height: 100%; position: absolute; top: 0; background-size: cover; background-position: center center;}
.index-menu-sec:nth-of-type(odd) figure {right: 0;}
.index-menu-sec:nth-of-type(even) figure {left: 0;}
.index-menu-sec:nth-of-type(1) figure {background-image: url("../images/index/products_img.jpg");}
.index-menu-sec:nth-of-type(2) figure {background-image: url("../images/index/company_img.jpg");}
.index-menu-sec:nth-of-type(3) figure {background-image: url("../images/index/recruit_img.jpg");}
.index-menu-sec-text {width: 50%; height: 100%; position: relative; }
.index-menu-sec:nth-of-type(odd) .index-menu-sec-text {float: left;}
.index-menu-sec:nth-of-type(even) .index-menu-sec-text {float: right;}
.index-menu-sec-text-in {width: 370px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center;}
.index-menu-sec-text-in h2 {writing-mode: vertical-rl; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; white-space: nowrap; display: inline-block; font-size: 17px; font-size:1.7rem; letter-spacing: .3em; border-bottom: 1px solid #0d2f00; padding-bottom: 15px; margin-bottom: 20px; font-weight: 400;}
.index-menu-sec-text-in p {line-height: 1.85; margin-bottom: 20px; letter-spacing: .15em;}
@media screen and (max-width:768px) {
    .index-menu-sec {height: auto;}
    .index-menu-sec figure{width: 100%; height: auto; padding-top: 56.25%; position: static;}
    .index-menu-sec-text {width: 100%; float: none!important; padding: 40px 15px;}
    .index-menu-sec-text-in {width: auto; position: static; -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%);}
	.index-menu-sec-text-in h2 {writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; -webkit-writing-mode: horizontal-tb; padding-bottom: 15px; margin-bottom: 20px; font-weight: 400;}
}

/* SCROLL */
.index-news-in,
.index-about-in,
.index-menu-sec figure,
.index-menu-sec-text {opacity: 0; -webkit-transform:translateY(60px); transform:translateY(60px); -webkit-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.index-news-in.active,
.index-about-in.active,
.index-menu-sec figure.active,
.index-menu-sec-text.active {opacity: 1; -webkit-transform:translateY(0px); transform:translateY(0px);}
@media screen and (max-width:768px) {
    .index-about figure {opacity: 0; -webkit-transform:translateY(60px); transform:translateY(60px); -webkit-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
    .index-about figure.active {opacity: 1; -webkit-transform:translateY(0px); transform:translateY(0px);}
}

/* ----------------------------------------

- PAGE

---------------------------------------- */
/* wrapper
---------------------------------------- */
.page .wrapper {z-index: 2; position: relative; opacity: 0;}

/* loading
---------------------------------------- */
.loading {z-index: 1; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url("../images/common/loading.svg") no-repeat center center; background-size: 40px 40px;}

/* page-mv
---------------------------------------- */
.page-mv {width: 100%; height: 500px; background-repeat: no-repeat; background-size: cover; background-position: center center; position: relative; margin-bottom: 80px; z-index: 1;}
.page-mv-logo {position: absolute; left: 3.33%; top: 45px;}
.page-mv-logo img {width: 170px; height: 59px;}
.about .page-mv {background-image: url("../images/about/mv.jpg");}
.howtobuild .page-mv {background-image: url("../images/howtobuild/mv.jpg");}
.products .page-mv {background-image: url("../images/products/mv.jpg");}
.company .page-mv {background-image: url("../images/company/mv.jpg");}
.recruit .page-mv {background-image: url("../images/recruit/mv.jpg");}
.news .page-mv {background-image: url("../images/news/mv.jpg");}
.blog .page-mv {background-image: url("../images/blog/mv.jpg");}
.contact .page-mv {background-image: url("../images/contact/mv.jpg");}
@media screen and (max-width:768px){
    .page-mv {height: auto; padding-top: 56.25%; margin-bottom: 40px;}
    .page-mv-logo {top: calc(100vw * .033);}
    .page-mv-logo img {width: 155px; height: 54px;}  
}

/* page-ttl
---------------------------------------- */
.page-ttl {text-align: center; margin-bottom: 60px;}
.page-ttl span {font-size: 17px; font-size:1.7rem; border-bottom: 1px solid #0d2f00; display: inline-block; letter-spacing: .25em; padding-bottom: 13px; font-weight: 400;}
@media screen and (max-width:768px){
    .page-ttl {margin-bottom: 35px;}
}

/* ----------------------------------------

- ABOUT

---------------------------------------- */
.about .main {margin-bottom: 80px;}
.about-sec01-row {position: relative; margin-bottom: 80px;}
.about-sec01-row-img {width: 63.2%;}
.about-sec01-row-img img {width: 100%; height: auto;}
.about-sec01-row-text {width: 30%; position: absolute; top:50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%);}
.about-sec01-row-text h2 {line-height: 1.7; font-size: 16px; font-size: 1.6rem; font-weight: 600; letter-spacing: .15em; margin-bottom: 15px;}
.about-sec01-row-text p {line-height: 1.9; letter-spacing: .15em; margin-bottom: 15px;}
.about-sec01-row:nth-of-type(odd) .about-sec01-row-img {float: left;}
.about-sec01-row:nth-of-type(odd) .about-sec01-row-text {right: 3.33%;}
.about-sec01-row:nth-of-type(even) .about-sec01-row-img {float: right;}
.about-sec01-row:nth-of-type(even) .about-sec01-row-text {left: 3.33%;}
.about-sec02 {max-width: calc(715px + 6.66%); padding: 0 3.33%; margin: 0 auto; text-align: center;}
.about-sec02 h2 {writing-mode: vertical-rl; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; white-space: nowrap; display: inline-block; font-size: 17px; font-size:1.7rem; letter-spacing: .3em; border-bottom: 1px solid #0d2f00; padding-bottom: 15px; margin-bottom: 20px; font-weight: 400;}
.about-sec02 h3 {font-weight: 600; font-size: 16px; font-size: 1.6rem; letter-spacing: .15em; line-height: 1.7; margin-bottom: 15px;}
.about-sec02 p {line-height: 1.9; letter-spacing: .15em;}
.about-sec02 p:nth-of-type(1) {margin-bottom: 15px;}
.about-sec02 p:nth-of-type(2) {margin-bottom: 30px;}
.about-sec02 ul {font-size: 0px; margin: 0 -10px;}
.about-sec02 ul li {display: inline-block; width: 33.333%; padding: 0 10px;}
.about-sec02 ul li img {width: 100%; height: auto;}
@media screen and (max-width:1024px){
    .about-sec01 {margin-bottom: 40px;}
    .about-sec01-row {margin-bottom: 20px;}
    .about-sec01-row-img {width: 100%; padding: 3.33%;}
    .about-sec01-row-text {width: 100%; padding: 3.33%; position: static; -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%);}
    .about-sec01-row-text h2 {text-align: center; margin-bottom: 10px;}
    .about-sec02 h2 {writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; -webkit-writing-mode: horizontal-tb; padding-bottom: 15px; margin-bottom: 20px; font-weight: 400;}
    .about-sec02 ul {margin: 0 -5px;}
    .about-sec02 ul li {padding: 0 5px;}
}
@media screen and (max-width:768px){
    .about .main {margin-bottom: 60px;}
}
@media screen and (max-width:600px){
	.about-sec02 h3 {font-size: 15px; font-size: 1.5rem; text-align: left;}
    .about-sec02 h3 br:nth-of-type(2) {display: none;}
    .about-sec02 p {text-align: left;}
}
/* SCROLL */
.about-sec01-row,
.about-sec02 {opacity: 0; -webkit-transform:translateY(60px); transform:translateY(60px); -webkit-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.about-sec01-row.active,
.about-sec02.active {opacity: 1; -webkit-transform:translateY(0px); transform:translateY(0px);}

/* ----------------------------------------

- HOW TO BUILD

---------------------------------------- */
.htb-movie {display: flex; position: relative; margin-bottom: 80px;}
.htb-movie:after {content: ""; display: block; width: 1px; height: 100%; background: #cdcdcd; position: absolute; left: 50%; top: 0;}
.htb-movie-sec {width: 50%; padding: 0 3.33%;}
.htb-movie-sec h2 {font-size: 16px; font-size: 1.6rem; font-weight: 600; letter-spacing: .15em; text-align: center; margin-bottom: 30px;}
.htb-movie-sec ul li {position: relative; padding-top: 56.25%; margin-bottom: 40px;}
.htb-movie-sec ul li:last-of-type {margin-bottom: 0;}
.htb-movie-sec ul li iframe {display: block; width: 100%; height: 100%; position: absolute; top: 0;}
@media screen and (max-width:768px){
    .htb-movie {display: block; margin-bottom: 40px;}
    .htb-movie:after {display: none;}
    .htb-movie-sec {width: auto; margin: 0 3.33% 30px; border-bottom: 1px solid #cdcdcd; padding: 0 0 30px;}
    .htb-movie-sec:last-of-type {border: none; padding: 0;}
    .htb-movie-sec ul li {margin-bottom: 30px;}
}

/* ----------------------------------------

- PRODUCTS

---------------------------------------- */
.products .main {margin-bottom: 80px;}
.products-nav {max-width: calc(1000px + 6.66%);  padding: 0 3.33%; margin: 0 auto 55px;}
.products-nav ul {font-size: 0px; text-align: center;}
.products-nav ul li {display: inline-block;  margin-bottom: 15px; border-left: 1px solid #c2c2c2; border-right: 1px solid #c2c2c2; margin-left: -1px;}
.products-nav ul li a {font-size: 13px; font-size: 1.3rem; letter-spacing: .2em; display: inline-block; height: 17px; padding: 0 30px; line-height: 17px;}
.pc .products-nav ul li a:hover span {opacity: .4; -webkit-transition: .2s; transition: .2s;}
.products-nav ul li a.active span {display: inline-block; border-bottom: 1px solid #0d2f00; opacity: 1!important;}
.products-list {padding: 0 17%; margin: 0 -1% 20px; display: flex; flex-wrap: wrap;}


@media screen and (max-width:1200px){

.products-list {
    padding: 0 10%;
    margin: 0 -1% 20px;
    display: flex;
    flex-wrap: wrap;
}

}




.products-list article {width: 33.333%; padding: 0 1%; margin-bottom: 60px;}
.products-list article a {display: block; -webkit-transition: .2s; transition: .2s;}
.pc .products-list article a:hover {opacity: .7;}
.products-list article a figure {margin-bottom: 12px; position: relative;}

.products-list article a figure img {
    width: 100%;
    height: 450px;
    position: relative;
    z-index: 1;
    object-fit: cover;
}

.products-list article a figure .cat {position: absolute; top: 10px; left: 10px; display: inline-block; white-space: nowrap; z-index: 2; color: #fff; background: #0d2f00; font-weight: 600; letter-spacing: .15em; padding: 5px 7px;}
.ie .products-list article a figure .cat {padding: 7px 7px 3px;}
.products-list article a h2 {font-size: 15px; font-size: 1.5rem; letter-spacing: .15em; text-align: center; font-weight: 600; line-height: 1.5;}
.products-article {max-width: calc(1000px + 6.66%); padding: 0 3.33%; margin: 0 auto;}
.products-article figure {width: 40%; float: left; text-align: center;}
.products-article figure img {max-width: 100%; height: auto;}
.products-article-text {width: 56%; float: right;}
.products-article-text-cat {color: #fff; background: #0d2f00; font-weight: 600; letter-spacing: .15em; padding: 5px 7px; display: inline-block;}
.ie .products-article-text-cat {padding: 7px 7px 3px;}
.products-article-text h1 {font-size: 21px; font-size: 2.1rem; letter-spacing: .15em; font-weight: 600; line-height: 1.5; margin-top: 7px; border-bottom: 1px solid #cdcdcd; padding-bottom: 10px; margin-bottom: 25px;}
.products-article-text h2 {font-size: 16px; font-size: 1.6rem; line-height: 1.7; letter-spacing: .15em; font-weight: 600; margin-bottom: 25px;}
.products-article-text-detail,
.products-article-text-detail p {line-height: 1.9; letter-spacing: .15em;}
.products-article-footer {max-width: calc(1000px + 6.66%); padding: 0 3.33%; margin: 70px auto 0; text-align: center; position: relative;}

/* SCROLL */
.products-list article {opacity: 0; -webkit-transform:translateY(60px); transform:translateY(60px); -webkit-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.products-list article.active {opacity: 1; -webkit-transform:translateY(0px); transform:translateY(0px);}

@media screen and (max-width:1024px){
    .products-list article {width: 50%;}
}

@media screen and (max-width:768px){
    .products .main {margin-bottom: 60px;}
    .products-nav {margin: 0 auto 30px;}
    .products-nav ul li a {padding: 0 15px;}
    .products-list article {margin-bottom: 30px;}
    .products-list article a figure {margin-bottom: 8px;}
    .products-list article a figure .cat {font-size: 11px; font-size: 1.1rem;}
    .products-list article a h2 {font-size: 13px; font-size: 1.3rem;}
    .products-article figure {float: none; width: auto; margin-bottom: 40px;}
    .products-article-text {width: auto; float: none;}
    .products-article-footer {margin-top: 40px;}

}
@media screen and (max-width:414px){
    .products-list article {width: 100%;}
}

/* ----------------------------------------

- COMPANY

---------------------------------------- */
.company .main {margin-bottom: 80px;}
.company-greeting {padding: 0 3.33%; position: relative; margin-bottom: 80px;}
.company-greeting-img {width: 58.4%; float: left;}
.company-greeting-img img {width: 100%; height: auto;}
.company-greeting-text {width: 35.5%; position: absolute; top:50%; right: 3.33%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%);}
.company-greeting-text h2 {line-height: 1.7; font-size: 16px; font-size: 1.6rem; font-weight: 600; letter-spacing: .15em; margin-bottom: 15px;}
.company-greeting-text p {line-height: 1.9; letter-spacing: .15em; margin-bottom: 10px;}
.company-greeting-text p:last-of-type {margin-bottom: 0; text-align: right; font-weight: 600;}
.company-outline {padding: 0 3.33%; position: relative; margin-bottom: 50px;}
.company-outline-text {width: 53.5%; float: left;}
.company-outline-text table {width: 100%; border-top: 1px solid #cdcdcd;}
.company-outline-text table th,
.company-outline-text table td {border-bottom: 1px solid #cdcdcd; line-height: 1.9; letter-spacing: .15em; padding: 13px 15px;}
.company-outline-text table th {text-align: left; font-weight: normal; vertical-align: middle; white-space: nowrap;}
.company-outline-img {width: 41%; float: right;}
.company-outline-img li:first-of-type {margin-bottom: 15px;}
.company-outline-img li img {width: 100%; height: auto;}
.company-map {padding: 0 3.33%;}
.company-map-canvas {width: 100%; height: 530px; position: relative; margin-bottom: 15px;}
.company-map-canvas iframe {width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.company-map p {line-height: 1.9; letter-spacing: .15em; text-align: center;}
@media screen and (max-width:1200px){
    .company-greeting-text {position: static; -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%); float: right;}
}
@media screen and (max-width:1024px){
    .company-greeting-img {width: 100%; float: none; margin-bottom: 20px;}
    .company-greeting-text {width: 100%; float: none;}
    .company-outline-text {width: 100%; float: none; margin-bottom: 30px;}
    .company-outline-img {width: auto; float: none; font-size: 0px; margin: 0 -10px;}
    .company-outline-img li {display: inline-block; width: 50%; padding: 0 10px; margin: 0;}
    .company-map-canvas{height: auto; padding-top: 75%;}
}
@media screen and (max-width:768px){
    .company .main {margin-bottom: 50px;}
    .company-greeting {margin-bottom: 40px;}
    .company-outline {margin-bottom: 30px;}
    .company-outline-text {margin-bottom: 20px;}
    .company-outline-text table,
    .company-outline-text table tbody,
    .company-outline-text table tr,
    .company-outline-text table th,
    .company-outline-text table td {display: block; padding-left: 0; padding-right: 0;}
    .company-outline-text table th {border-bottom: none; font-weight: 700; padding-bottom: 0;}
    .company-outline-text table td {border-top: none; padding-top: 0;}
    .company-outline-img {margin: 0 -7.5px;}
    .company-outline-img li {padding: 0 7.5px;}
}
/* SCROLL */
.company-greeting,
.company-outline,
.company-map {opacity: 0; -webkit-transform:translateY(60px); transform:translateY(60px); -webkit-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.company-greeting.active,
.company-outline.active,
.company-map.active {opacity: 1; -webkit-transform:translateY(0px); transform:translateY(0px);}

/* ----------------------------------------

- RECRUIT

---------------------------------------- */
.recruit .main {margin-bottom: 80px;}
.recruit-message {max-width: calc(542px + 6.66%); padding: 0 3.33%; margin: 0 auto 80px; text-align: center;}
.recruit-message h2 {font-size: 14px; font-size: 1.4rem; font-weight: 400; font-family: 'Libre Baskerville', serif; letter-spacing: .2em; margin-bottom: 20px;}
.recruit-message h3 {font-size: 16px; font-size: 1.6rem; letter-spacing: .15em; font-weight: 600; line-height: 1.7; margin-bottom: 20px;}
.recruit-message p {line-height: 1.9; letter-spacing: .15em; margin-bottom: 10px;}
.recruit-voices {margin-bottom: 80px;}
.recruit-voices-fig {width: 100%; height: 500px; background: url("../images/recruit/voices-img.jpg") no-repeat center center; background-size: cover; background-attachment: fixed;}
.recruit-voices-list {max-width: calc(1000px + 6.66%); padding: 80px 3.33% 0; margin: 0 auto;}
.recruit-voices-list h2 {font-weight: normal; text-align: center; margin-bottom: 40px;}
.recruit-voices-list h2 span {display: block; font-size: 16px; font-size: 1.6rem; letter-spacing: .2em; margin-bottom: 10px;}
.recruit-voices-list h2 small {display: block; font-family: 'Libre Baskerville', serif; font-size: 13px; font-size: 1.3rem; letter-spacing: .2em;}
.recruit-voices-list-sec {margin-bottom: 50px;}
.recruit-voices-list-sec:last-of-type {margin-bottom: 0;}
.recruit-voices-list-sec h3 {position: relative; margin-bottom: 30px;}
.recruit-voices-list-sec h3 span {font-size: 21px; font-size: 2.1rem; letter-spacing: .15em; font-weight: 600; display: inline-block; margin-bottom: 10px; position: relative; z-index: 2; background: url(../images/common/bg01.png) repeat; background-size: 200px 200px; padding-right: 5px;}
.recruit-voices-list-sec h3 small {font-family: 'Libre Baskerville', serif; font-weight: 400; font-size: 11px; font-size: 1.1rem; letter-spacing: .15em; display: block;}
.recruit-voices-list-sec h3:before {content: ""; display: block; position: absolute; top: 12px; left: 0; width: 100%; height: 1px; background: #0d2f00; z-index: 1;}
.recruit-voices-list-sec-img {float: right; width: 36.5%;}
.recruit-voices-list-sec-img img {width: 100%; height: auto;}
.recruit-voices-list-sec-text {width: 60%; float: left;}
.recruit-voices-list-sec-text ul li {background: #fff; box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.1); padding: 18px 20px; margin-bottom: 15px;}
.recruit-voices-list-sec-text ul li h4 {font-weight: normal; letter-spacing: .15em; line-height: 1.7; position: relative; padding-left: 25px; padding-right: 25px; cursor: pointer;}
.recruit-voices-list-sec-text ul li h4:before {position: absolute; left: 0; top: -5px; content: "Q"; font-size: 18px; color: #0d2f00;}
.recruit-voices-list-sec-text ul li h4:after {display: block; position: absolute; top: 0; right: 2px; content: "\f107"; font-family: FontAwesome; font-size: 18px; color: #0d2f00;}
.recruit-voices-list-sec-text ul li.active h4:after {content: "\f106";}
.recruit-voices-list-sec-text ul li p {line-height: 1.9; letter-spacing: .15em; border-top: 1px solid #0d2f00; padding-top: 15px; margin-top: 15px; display: none;}

.recruit-requirements {max-width: calc(1000px + 6.66%); padding: 0 3.33%; margin: 0 auto;}
.recruit-requirements h2 {font-weight: normal; text-align: center; margin-bottom: 35px;}
.recruit-requirements h2 span {display: block; font-size: 16px; font-size: 1.6rem; letter-spacing: .2em; margin-bottom: 10px;}
.recruit-requirements h2 small {display: block; font-family: 'Libre Baskerville', serif; font-size: 13px; font-size: 1.3rem; letter-spacing: .2em;}
.recruit-requirements table {width: 100%; border-top: 1px solid #cdcdcd; margin-bottom: 50px;}
.recruit-requirements table th,
.recruit-requirements table td {border-bottom: 1px solid #cdcdcd; line-height: 1.9; letter-spacing: .15em; padding: 13px 15px;}
.recruit-requirements table th {text-align: left; font-weight: normal; vertical-align: middle; white-space: nowrap; width: 130px;}
.recruit-requirements-contact {text-align: center;}
.recruit-requirements-contact h3 {font-size: 14px; font-size: 1.4rem; letter-spacing: .15em; font-weight: normal; margin-bottom: 10px;}
.recruit-requirements-contact .tel {font-size: 23px; font-size: 2.3rem; margin-bottom: 12px;}
@media screen and (max-width:768px){
    .recruit .main {margin-bottom: 60px;}
    .recruit-message {margin: 0 auto 50px;}
    .recruit-message p {text-align: left;}
    .recruit-voices {margin-bottom: 60px;}
    .recruit-voices-fig {height: auto; padding-top: 56.25%; background-attachment: scroll; background-position: center center!important;}
    .recruit-voices-list {padding-top: 40px;}
    .recruit-voices-list-sec {margin-bottom: 35px;}
    .recruit-voices-list-sec h3 {margin-bottom: 20px;}
    .recruit-voices-list-sec-img {float: none; width: 100%; max-width: 220px; margin: 0 auto 20px;}
    .recruit-voices-list-sec-img img {width: 100%; height: auto;}
    .recruit-voices-list-sec-text {width: 100%; float: none;}
    .recruit-voices-list-sec-text ul li {padding: 12px 15px; margin-bottom: 10px;}
    .recruit-requirements table {margin-bottom: 30px;}
    .recruit-requirements table,
    .recruit-requirements table tbody,
    .recruit-requirements table tr,
    .recruit-requirements table th,
    .recruit-requirements table td {display: block; padding-left: 0; padding-right: 0;}
    .recruit-requirements table th {border-bottom: none; font-weight: 700; padding-bottom: 0;}
    .recruit-requirements table td {border-top: none; padding-top: 0;}
    .recruit-requirements-contact h3 {letter-spacing: .07em; white-space: nowrap;}
}
/* SCROLL */
.recruit-message,
.recruit-voices-list,
.recruit-voices-list-sec,
.recruit-requirements {opacity: 0; -webkit-transform:translateY(60px); transform:translateY(60px); -webkit-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.recruit-message.active,
.recruit-voices-list.active,
.recruit-voices-list-sec.active,
.recruit-requirements.active {opacity: 1; -webkit-transform:translateY(0px); transform:translateY(0px);}

/* ----------------------------------------

- NEWS

---------------------------------------- */
.news-list {max-width: 1000px; padding: 0 3.33%; margin: 0 auto 40px; display: flex; flex-wrap: wrap;}
.news-list article {width: 50%; margin-bottom: 40px;}
.news-list article:nth-child(odd) {padding-right: 1.5%;}
.news-list article:nth-child(even) {padding-left: 1.5%;}
.news-list article a {display: block; position: relative; -webkit-transition: .2s; transition: .2s;}
.pc .news-list article a:hover {opacity: .7;}
.news-list-fig {width: 150px;}

.news-list-fig img {
    width: 100%;
    height: 95px;
    object-fit: cover;
}

.news-list-text {width: calc(100% - 170px); position: absolute; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); right: 0;}
.news-list-text h2 {line-height: 1.6; font-weight: 400; margin-bottom: 8px;}
.news-list-text .date {font-size: 12px; font-size: 1.2rem;}
.news #wp_page_numbers{padding-bottom:80px;}
.insta-list {padding: 80px 3.33% 100px; background: url("../images/common/bg02.png") repeat; background-size: 200px 200px;}
.insta-list ul {display: flex; margin: 0 -12px;}
.insta-list ul li {width: 12.5%; padding: 0 12px;}
.insta-list ul li a img {width: 100%; height: auto;}
.insta-list ul li a {-webkit-transition: .2s; transition: .2s;}
.pc .insta-list ul li a:hover {opacity: .7;}
.insta-list-btn {text-align: center; margin-top: 40px;}
@media screen and (max-width:1024px){
    .news #wp_page_numbers{padding-bottom:60px;}
    .insta-list ul {flex-wrap: wrap; margin-bottom: -24px;}
    .insta-list ul li {width: 25%; margin-bottom: 24px;}
    .insta-list-btn {margin-top: 40px;}
}
@media screen and (max-width:768px){
	.news-list {margin: 0 0 30px;}
	.news-list article {width: 100%; border-bottom: 1px solid #cdcdcd; padding: 0 0 15px!important; margin-bottom: 15px;}
    .news-list-fig {width: 100px; float: left;}
    .news-list-text {width: 100%; float: right; margin-left: -115px; padding-left: 115px; position: static; -webkit-transform: translate(0, 0); transform: translate(0, 0);}
    
    
    .insta-list {padding: 50px 3.33% 50px;}
    .insta-list ul {margin: 0 -7.5px;}
    .insta-list ul li {padding: 0 7.5px; margin-bottom: 15px;}
    .insta-list-btn {margin-top: 20px;}
}
@media screen and (max-width:414px){
	.news-list-fig {width: 90px;}
    .news-list-text {margin-left: -105px; padding-left: 105px;}
}

/* ----------------------------------------

- BLOG

---------------------------------------- */
.blog .main {margin-bottom: 80px;}

.news .main {
    margin-bottom: 80px;
}

.blog-nav {max-width: calc(800px + 6.66%);  padding: 0 3.33%; margin: 0 auto 50px;}
.blog-nav ul {font-size: 0px; text-align: center;}
.blog-nav ul li {display: inline-block; padding: 0 10px; margin-bottom: 10px;}
.blog-nav ul li .select-wrap {background: #fff; border: 1px solid #cdcdcd; display: inline-block; height: 36px; line-height: 36px; position: relative;}
.blog-nav ul li .select-wrap:after {position: absolute; content: "\f107"; font-family: FontAwesome; right: 10px; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); font-size: 16px; color: #111; z-index: 1;}
.blog-nav ul li .select-wrap select{-webkit-appearance:none !important; -moz-appearance: none!important; appearance: none!important; outline: none!important; background: transparent; border-radius: 0; border: none; font-family: inherit!important; vertical-align: top; font-size: 12px; height: 36px; text-align: center; position: relative; z-index: 2; padding: 0 50px;}
.blog-nav ul li .select-wrap select::-ms-expand {display: none;}
.blog-list {padding: 0 3.33%; margin: 0 -1%; display: flex; flex-wrap: wrap;}
.blog-list article {width: 25%; padding: 0 1%; margin-bottom: 60px;}
.blog-list article > a {display: block; -webkit-transition: .2s; transition: .2s;}
.pc .blog-list article > a:hover {opacity: .7;}
.blog-list article > a > figure {margin-bottom: 10px;}

.blog-list article > a > figure img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.blog-list article > a h2 {font-weight: 400; line-height: 1.6; margin-bottom: 8px;}
.blog-list article .info {position: relative;}
.blog-list article .info figure {width: 50px; height: 50px; border: 3px solid #fff; border-radius: 50%; overflow: hidden; box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.2); display: inline-block; margin-right: 8px;}
.blog-list article .info figure img {width: 100%; height: auto;}
.blog-list article .info p {display: inline-block; font-size: 12px; font-size: 1.2rem; vertical-align: 18px;}
.safari .blog-list article .info p {vertical-align: -18px;}
.blog-list article .info .date {position: absolute; right: 0; top: 20px; font-size: 12px; font-size: 1.2rem;}

.blog-article {max-width: calc(800px + 6.66%); padding: 0 3.33%; margin: 0 auto;}
.blog-article-header {margin-bottom: 30px;}
.blog-article-header-date {font-size: 12px; font-size: 1.2rem; margin-bottom: 5px;}
.blog-article-header-ttl {font-weight: 600; font-size: 21px; font-size: 2.1rem; letter-spacing: .15em; line-height: 1.5; border-bottom: 1px solid #cdcdcd; padding-bottom: 15px; margin-bottom: 15px;}
.blog-article-header-info-author {float: left; font-size: 0px;}
.news .blog-article-header-info-author {display: none;}
.blog-article-header-info-author figure {width: 50px; height: 50px; border: 3px solid #fff; border-radius: 50%; overflow: hidden; box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.2); display: inline-block; margin-right: 8px;}
.blog-article-header-info-author figure img {width: 100%; height: auto;}
.blog-article-header-info-author p {display: inline-block; font-size: 12px; font-size: 1.2rem; vertical-align: 18px;}
.safari .blog-article-header-info-author p {vertical-align: -28px;}
.blog-article-header-info ul {font-size: 0px; text-align: right; padding-top: 17px;}
.blog-article-header-info ul li {display: inline-block; margin-left: 7px; vertical-align: top;}
.blog-article-content,
.blog-article-content * {line-height: 1.9; letter-spacing: .15em;}
.blog-article-content *:nth-child(1) {margin-top: 0px;}
.blog-article-content img {max-width: 100%; height: auto; margin: 15px 0;}
.blog-article-content p {margin: 15px 0;}
.blog-article-footer {max-width: calc(800px + 6.66%); padding: 0 3.33%; margin: 70px auto 0; text-align: center; position: relative;}
.blog-article-footer-prev,
.blog-article-footer-next {position: absolute; top: 0;}
.blog-article-footer-prev {left: 3.8%;}
.blog-article-footer-next {right: 3.8%;}

/* SCROLL */
.blog-list article {opacity: 0; -webkit-transform:translateY(60px); transform:translateY(60px); -webkit-transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.blog-list article.active {opacity: 1; -webkit-transform:translateY(0px); transform:translateY(0px);}

@media screen and (max-width:1024px){
    .blog-list article {width: 33.333%;}
}
@media screen and (max-width:768px){
    .blog .main {margin-bottom: 60px;}
    .blog-nav {margin: 0 0 40px 0;}
    .blog-list {margin: 0 -1.6% 20px;}
    .blog-list article {width: 50%; padding: 0 1.6%; margin-bottom: 30px;}
}
@media screen and (max-width:568px){
    .blog-article-header {margin-top: -20px;}
    .blog-article-header-ttl {padding-bottom: 10px; margin-bottom: 10px;}
    .blog-article-header-info {text-align: center;}
    .blog-article-header-info-author {float: none;}
    .blog-article-header-info ul {text-align: center; padding-top: 10px;}
    .blog-article-header-info ul li {margin: 0 5px;}
    .blog-article-footer {margin-top: 30px;}
    .blog-article-footer-prev,
    .blog-article-footer-next {position: static; top: 0; margin-bottom: 10px;}
}
@media screen and (max-width:414px){
    .blog-list article {width: 100%;}
}

/* ----------------------------------------

- NEWS & BLOG

---------------------------------------- */

.blog-article-content p{
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: .15em;
	margin-bottom: 10px;
}
.blog-article-content img{
    margin:20px 0;
	max-width:100%;
	width:auto !important;
	height:auto !important;
	display: inherit;
}
.blog-article-content img.aligncenter {
	margin:20px auto;
}
.blog-article-content img.alignleft {
	float:left;
	margin:20px 20px 20px auto;
}
.blog-article-content img.alignright {
	float: right;
	margin:20px auto 20px 20px;
}
.blog-article-content h2 {
    font-weight: 500;
}
.blog-article-content h1{
	font-size:23px;
	line-height:1.4;
    font-weight: 500;
	margin:25px auto 15px auto;
    position: relative;
    padding-bottom: 10px;
    display: grid;
}
.blog-article-content h1:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 3px;
      background: #222;
}
.blog-article-content h2{
	font-size:22px;
	line-height:1.4;
	margin:25px auto 10px auto;
	position: relative;
    display: grid;
    text-align: left;
}
.blog-article-content h2:after {
    content: "";
    display: block;
    height: 4px;
    margin-top: 4px;
    background: -webkit-linear-gradient(to right, #222222, rgb(200, 200, 200), #b222222);
    background: linear-gradient(to right, #222222, rgb(200, 200, 200), #222222);
}
.blog-article-content h3{
	font-size:17px;
	line-height:1.6;
    font-weight: normal;
	margin:15px auto 10px auto;
    padding: 0.2em 0.5em;/*上下 左右の余白*/
    background: transparent;/*背景透明に*/
    border-left: solid 4px #000;/*左線*/
    display: grid;
}
.blog-article-content h4{
	font-size:17px;
	line-height:1.6;
    font-weight: normal;
	margin:15px auto 10px auto;
}
.blog-article-content p a{
    color: #000;
	text-decoration:underline;
}
.blog-article-content p a:hover{
	text-decoration:none;
	opacity: .5;
}

.blog-article-content ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 1.5em;
}
.blog-article-content ol {
    display: block;
    list-style-type: decimal;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 1.5em;
}
.blog-article-content ul li {
    display: list-item;
    list-style-type: disc;
}
.blog-article-content ol li {
    display: list-item;
    list-style-type: decimal;
}
.blog-article-content blockquote {
    position: relative;
    padding: 10px 15px 10px 50px;
    box-sizing: border-box;
    font-style: italic;
    border: solid 2px #464646;
    color: #464646;
}
.blog-article-content blockquote:before{
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 5px;
    vertical-align: middle;
    content: "“";
    font-family: "noto serif sc";
    color: #CCC;
    font-size: 80px;
    line-height: 1;
}
.blog-article-content blockquote p {
    padding: 0;
    margin: 0 0;
    line-height: 1.7;
}
.blog-article-content blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}
@media screen and (max-width: 767px) {
.blog-article-content img{
	margin:15px 0;
}
.blog-article-content img.aligncenter {
	margin:15px auto;
}
.blog-article-content img.alignleft,
.blog-article-content img.alignright {
	float: none;
	margin:15px auto;
    clear: both;
}
.blog-article-content h1{
	font-size:21px;
	line-height:1.6;
	margin:20px auto 8px auto;
}
.blog-article-content h2{
	font-size:19px;
	line-height:1.6;
	margin:20px auto 8px auto;
}
.blog-article-content h4,
.blog-article-content h3{
	font-size:16px;
	line-height:1.6;
	margin:10px auto 5px auto;
}
.blog-article-content h1,
.blog-article-content h2,
.blog-article-content h3,
.blog-article-content h4 {
    clear: both;
}
}
@media (max-width: 600px) {
.blog-article-content h1{
	font-size:19px;
	line-height:1.4;
	margin:12px auto 8px auto;
}
.blog-article-content h2{
	font-size:17px;
	line-height:1.4;
	margin:12px auto 8px auto
}
.blog-article-content h4,
.blog-article-content h3{
	font-size:15px;
	line-height:1.4;
}
}

/* ----------------------------------------

- CONTACT

---------------------------------------- */
.contact .main {max-width: calc(800px + 6.66%); padding: 0 3.33%; margin: 0 auto 80px;}
.contact-header {text-align: center; margin-bottom: 60px;}
.contact-header h3 {font-size: 16px; font-size: 1.6rem; letter-spacing: .15em; font-weight: 600; line-height: 1.7; margin-bottom: 10px;}
.contact-header p {line-height: 1.9; letter-spacing: .15em;}
.contact-header p span {color: #e01616;}
.contact-form {}
.contact-form table {width: 100%;}
.contact-form table th,
.contact-form table td {padding-bottom: 30px; letter-spacing: 0.1em; line-height: 1.6;}
.contact-form table th {vertical-align: middle; font-weight: 400; width: 150px; text-align: left; white-space: nowrap;}
.contact-form table th .required {color: #e01616; font-size: 11px; font-size: 1.1rem; display: inline-block; vertical-align: 1px;}
.contact-form table tr:last-of-type th {vertical-align: top; padding-top: 12px;}
.contact-form-send {display: flex; justify-content: center; align-items: center;}
.contact-form form input[type="submit"] {cursor: pointer; outline: none; -webkit-appearance: button; appearance: button; background: #0d2f00; border: none; color: #fff; max-width: 360px; width: 100%; display: block; height: 55px; font-size: 14px; position: relative; -webkit-transition: all 100ms; transition: all 100ms; font-weight: 700; letter-spacing: 0.15em; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", 'Noto Serif Japanese', serif; padding: 0 20px; margin: 0 5px;}
.contact-form form input[type="submit"]:hover{opacity:0.7;}
.contact-form form input[type="submit"].backbutton {border: 1px solid #0d2f00; background: #fff; color: #0d2f00; max-width: 180px;}

.contact-form table td input[type="text"],
.contact-form table td textarea {-webkit-appearance: none; border-radius: 0; outline: none; border: none; background: rgba(255, 255, 255, .7); box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, .12) inset; width: 100%; font-size: 16px; line-height: 1.5; padding: 10px;}
.contact-form form td input[type="text"] {height: 45px;}
.contact-form form td textarea {min-height: 250px; resize: vertical;}

.contact-form form .confirm {margin-bottom: 40px;}
.contact-form form .confirm th {vertical-align: top!important;}
.contact-form form .confirm th,
.contact-form form .confirm td {border-bottom: 1px solid #cdcdcd; padding-top: 20px!important; padding-bottom: 20px!important;}
.contact-form form .confirm tr:first-of-type th,
.contact-form form .confirm tr:first-of-type td {padding-top: 0!important;}
.contact-form form .confirm tr:last-of-type th,
.contact-form form .confirm tr:last-of-type td {border: none;}

.contact-form-privacy {border: 1px solid #cdcdcd; background: rgba(255, 255, 255, .7); height: 232px; padding: 15px 20px; overflow-y: scroll; margin-bottom: 30px; margin-top: 5px;}
.contact-form-privacy * {line-height: 1.8;}
.contact-form-privacy dl {margin-bottom: 25px;}
.contact-form-privacy dt {font-weight: 600; font-size: 12px; font-size: 1.2rem;}
.contact-form-privacy dd {margin-bottom: 10px; font-weight: 400; font-size: 12px; font-size: 1.2rem;}
.contact-form-privacy dd a:hover {text-decoration: none; opacity: 1;}
.contact-form-privacy-btn {text-align: center; line-height: 1; padding-bottom: 30px; font-size: 14px; font-size: 1.4rem;}
.contact-form-privacy-btn label input{margin-right:7px; vertical-align:1px;}

.contact-thanks {text-align: center; margin: -30px 0 0;}
.contact-thanks p {line-height: 2; margin-bottom: 40px;}

@media screen and (max-width:768px){
    .contact-header {margin-bottom: 35px;}
    .contact-thanks {margin: -20px 0 0;}
}
@media screen and (max-width:568px){
    .contact-header h3 br {display: none;}
    .contact-form table table,
    .contact-form table tbody,
    .contact-form table tr,
    .contact-form table th,
    .contact-form table td {display: block;}
    .contact-form table th {width: 100%; padding-bottom: 8px;}
    .contact-form table td {padding-bottom: 20px;}
    .contact-form form .confirm {margin-bottom: 20px;}
    .contact-form form .confirm th {border: none; padding-bottom: 0!important; font-weight: 700;}
    .contact-form form .confirm td {padding-top: 0!important;}
}

@media screen and (max-width:1023px){

br.pc{
	display: none;
}

}

@media screen and (max-width:767px){
    .header-in {width: 100%; height: 100%; position: relative; overflow: auto; -webkit-overflow-scrolling: touch;}
    .header-in-nav {position: absolute; left: 50%; top: 0; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); padding: 15% 0;}

}
@media screen and (max-width:1023px) and (max-height:450px){
    .header-in {width: 100%; height: 100%; position: relative; overflow: auto; -webkit-overflow-scrolling: touch;}
    .header-in-nav {position: absolute; left: 50%; top: 0; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); padding: 5% 0;}

}

.insta-list-01 {
    display: block;
}
.insta-list-02 {
    display: none;
}
@media screen and (max-width:1023px) {
.insta-list-02 {
    display: block;
}
.insta-list-01 {
    display: none;
}
}


/*blog list*/


#blog_list{
    max-width: calc(900px + 6.66%);
    padding: 0px 3.33% 0;
    margin: 0 auto;
}

#blog_list ul{
	width: 100%;	
	display: flex;
	flex-direction: column;
    margin-top: -20px;
    padding-bottom: 40px;
}

#blog_list ul li{
	height: 150px;
	box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.1);
	background-color: white;
	margin-top: 30px;
}

#blog_list ul li a {
    width: 30%;
    margin-right: 10%;
}
#blog_list h3 {
    font-weight: normal;
    letter-spacing: .15em;
    line-height: 1.7;
    position: relative;
    padding-left: 10%;
    margin-right: 10%;
    cursor: pointer;
    font-size: 1.7em;
    width: 50%;
    border-right: 1px solid #efefef;
}

#blog_list h3 small {
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    font-size: 11px;
    font-size: 1.1rem;
    letter-spacing: .15em;
    display: block;
}

#blog_list dl{
	display: flex;
	width: 100%;
	height: inherit;
	align-items: center;
}

#blog_list dt{
	width: 30%;

}

#blog_list dd{
	width: 70%;
	display: flex;
	align-items: center;
	justify-content: center;
}


#blog_list dt.pic1{
	background: url("../images/blog/voices-bandou.jpg") no-repeat;
	background-position: center top;
	background-size: cover;
	height: inherit;
}

#blog_list dt.pic2{
	background: url("../images/blog/voices-yoshida.jpg") no-repeat;
	background-position: center top;
	background-size: cover;
	height: inherit;
}

#blog_list dt.pic3{
	background: url("../images/blog/voices-namera.jpg") no-repeat;
	background-position: center top;
	background-size: cover;
	height: inherit;
}

@media screen and (max-width:767px){
	
	#blog_list dl {
    display: flex;
    width: 100%;
    height: inherit;
    align-items: center;
    flex-direction: column;
}

#blog_list dt {
    width: 100%;
}

#blog_list ul li {
    height: auto;
    box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.1);
    background-color: white;
    margin-top: 30px;
}

#blog_list dt.pic1 {
    height: 200px;
}

#blog_list dt.pic2 {

    height: 200px;
}

#blog_list dt.pic3 {
    height: 200px;
}

#blog_list dd {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#blog_list dd {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 30px;
}

#blog_list h3 {
    border-right: none;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    padding-top: 20px;
}

#blog_list ul li a {
    width: 50%;
    margin-right: 0px;
    margin-top: 30px;
}
	

}