@charset "utf-8";
@import url('components.css');
@import url('iconfont/material-icons.css');
@import url('https://fonts.googleapis.com/css?family=Lato|Noto+Serif+JP&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap&subset=japanese');


/* common parts
****************************************************/
html.active_nav { overflow: hidden;}
.tx_indent { margin-left:1em; text-indent:-1em; }
.sp_content { display: none;}

ul.disc { padding-left:25px; }
ul.disc li {list-style-type:disc; margin-bottom:10px; position:relative;}
ol li { list-style-type:decimal; margin-left:1.2rem; padding-left:5px; margin-bottom:10px;}
.pc_nodisp { display: none; }
.btn { border:0; display:inline-block; color:#fff; vertical-align:middle; text-decoration:none; text-align:center; padding:15px 20px; font-size:1rem; transition:all 0.2s ease-out; background: #3ca1e9; position:relative; border-radius:4px; min-width:240px;}
.btn:hover { background: #3186c3;}

.btn i { vertical-align:middle; margin-left:5px; margin-top:-3px; font-size:1.2rem;}
.btn i.left { margin-left:0; margin-right:5px;}
.btn.mini { font-size:0.9rem; padding:4px 20px;}
.btn.small { font-size:0.9rem; padding:8px 20px;}
.btn.large { font-size:1.2rem; padding:20px 20px; min-width:600px;}
.btn.xlarge { font-size:1.3rem; padding:25px;}
.btn.black { background:#333;}
.btn.black:hover { background:#111;}

.common_btn_area { margin:40px 0 30px; text-align:center;}
.common_btn_area.right { text-align:right;}
.common_btn_area .btn + .btn { margin-left:10px;}
.common_btn_area.wide_margin { margin:40px 0 100px;}
.column2_btn { display:flex; flex-wrap:wrap; justify-content:space-between;}
.column2_btn .btn { width:49%; margin-bottom:10px;}

a.reverse_line { text-decoration:none;}
a.reverse_line:hover { text-decoration:underline;}
.label { background:#033d73; color:#fff; padding:7px 10px 5px; display:inline-block; text-align:center; font-size:0.9rem; line-height:1;}
.label.small { padding:5px 10px 5px; font-size:0.8rem;}
.label.border { background:none; color:#033d73; border:1px solid #033d73;}

.border_link { border-bottom:1px solid; text-decoration:none; padding-bottom:5px; position:relative; padding-right:25px;}
.border_link i { font-size:1.3rem; position:absolute; top:50%; right:0; transition:0.2s; line-height:1; margin-top:-0.8rem;}
.border_link:hover i { right:-5px;}
.material-icons { font-size:20px; }
.material-icons.normal { margin-top:-3px; }

.bg_green_gradaition { background:linear-gradient( 155deg, #5da60a, #315b00); }
.bg_gray { background:#f5f5f5; }

.title h3 { font-size: 1.7rem; border-bottom: 2px solid #d1d1d1; position: relative; padding-bottom: 15px; font-weight: 600; margin-bottom: 30px;}
.title h3::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 12%; border-bottom: 2px solid #2c85c5;}
.title h4 { padding: 10px 20px; border-left: 5px solid #2c85c5; background: #f4f4f4; font-size: 1.25rem; font-weight: 600; margin-bottom: 20px;}

.btn_area { display: flex; margin-top: 40px; justify-content: center;}
.btn_area a { display: block; text-decoration: none; width: 250px; border-radius: 5px; text-align: center; padding: 13px 0; background: #2c85c5; font-weight: 600; color: #fff; box-sizing: border-box; transition: .3s;}
.btn_area a:hover { opacity: .7;}

.thum img { width: 100%; height: 100%;}

.section_title { margin-bottom:40px; text-align:center;}
.section_title .tx { font-size:2.8rem; font-weight:600; display:block; margin-bottom: 15px; line-height:1.3;}
.section_title .square, .section_title .square:before, .section_title .square:after { width:12px; height:7px; content:''; display:inline-block;}
.section_title .square {  width:12px; height:7px; content:''; display:inline-block; background:#3ca1e9; position:relative; }
.section_title .square:before { background:#2c85c5; position:absolute; left:-17px; top:0;}
.section_title .square:after { background:#0c446d; position:absolute; right:-17px; top:0;}

.cont_title01 { font-size:1.8rem; font-weight:600; margin-bottom:20px; position:relative; padding-bottom:30px; line-height: 1.4;}
.cont_title01 .square, .cont_title01 .square:before, .cont_title01 .square:after { position:absolute; width:12px; height:7px; content:''; display:inline-block;}


.img_desc_box { display:flex;}
.img_desc_box .image { width:calc( ( 100% - 70px ) / 2 ); height:500px; display:flex; margin-right:70px;}
.img_desc_box .image img { object-fit:cover;}
.img_desc_box .tx_area { width:calc( ( 100% - 70px ) / 2 ); display:flex; padding-right:7vw; align-content:center; flex-wrap:wrap; box-sizing:border-box;}
.img_desc_box .tx_area .ttl { width:100%;}
.img_desc_box .tx_area .desc { width:100%;}
.img_desc_box .tx_area .btn_area { margin-top:40px;}
.top_page .img_desc_box { margin-bottom: 80px;}

.top_page .img_desc_box .tx_area { padding-right: 0 !important;}
.top_page .img_desc_box .tx_area p { height: 100%;}
.top_page .img_desc_box .tx_area iframe { width: 100%; height: 100%;}

.common_catch { text-align:center; font-size:2.0rem; font-weight:600; margin-bottom:30px; }
.cont_desc { text-align:center; line-height:1.8; margin-bottom:60px;}

.img_nav01 { display:flex; flex-wrap:wrap; }
.img_nav01 li { width:calc( ( 100% - 30px ) / 2 ); margin-right: 30px;}
.img_nav01 li:nth-of-type(2n) { margin-right: 0;}
.img_nav01 li:nth-of-type(n + 3) { margin-top: 30px;}
.img_nav01 li a { position:relative; display:block;}
.img_nav01 li a img { object-fit:cover;}
.img_nav01 li .tx_area { height: 75.59px; background:rgba(0,0,0,0.6); position:absolute; bottom:0; left:0; color:#fff; padding:15px 20px; width:100%; box-sizing:border-box;}
.img_nav01 li .tx_area .tx01 { font-size:0.85rem; line-height:1;}
.img_nav01 li .tx_area .tx02 { font-weight:600; font-size:1.5rem; line-height:1; margin-top:8px;}
.img_nav01 li .tx_area:after { font-family:'Material Icons'; content:"\e315"; position:absolute; right:10px; top:50%; transform: translateY(-50%); font-size:1.8rem; line-height:1; color:#fff; font-weight:normal; transition:0.2s;}

.img_nav02 { display:flex; flex-wrap:wrap; box-sizing:border-box; background:#fff; padding: 30px;}
.img_nav02 li { width:calc( ( 100% - 40px ) / 3 ); margin-right: 20px;}
.img_nav02 li:last-child { margin-right: 0;}
.img_nav02 li a { display:flex; position:relative; justify-content:center;}
.img_nav02 li a img { width: 100%; height: 100%; object-fit:cover;}
.img_nav02 li a:after { content:''; width:100%; height:100%; background:rgba(0,0,0,0.2); position:absolute; top:0; left:0;}
.img_nav02 li a .tx01 { position:absolute; line-height:1; font-size:1.4rem; top:50%; margin-top: -0.7rem; color:#fff; font-weight:600; text-align:center; width:100%; text-shadow:0 0 2px rgba(0,0,0,0.4); z-index:100;}
.img_nav02 li a .tx01:after { content:''; width:16px; height:2px; background:#fff; position:absolute; bottom:-15px; left:50%; margin-left:-8px;}

.column3_bnr { display:flex;}
.column3_bnr li { width:calc( ( 100% - 60px ) / 3 ); margin-right:30px;}
.column3_bnr li:nth-of-type(3n) { margin-right:0;}

.key_title {position: relative; width: 100%; height: auto;}
.key_title img {width: 100%;}
.key_title h1 {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-weight: 600; color: #fff; padding: 0; margin: 0; text-align: center;}
.key_title h1 .tx { font-size: 3.3rem;}
.key_title .section_title .square:before { background: #fff;}
.key_title .section_title .square { background: #fff;}
.key_title .section_title .square:after { background: #fff;}


/* layout
****************************************************/
.container { padding:70px 0; }
.container.bg_recruit { background:url(../images/top/bg_recruit.jpg) center center no-repeat; background-size:cover; position: relative; z-index:2; color:#fff;}
.container.bg_recruit:before { content:''; width:100%; height:100%; background:rgba(0,0,0,0.4); position:absolute; top:0; left:0; display:block; z-index:1;}
.container.bg_recruit .common_inner { position:relative; z-index:2;}
.common_inner { width:1200px; margin: 0 auto; box-sizing:border-box;}
.common_inner_narrow { width:900px; margin: 0 auto; box-sizing:border-box;}
.cont_block + .cont_block { margin-top: 80px;}
.pan{ margin-top: 15px;}
.connection_txt { margin-top: 20px;}
.underlayer .section_title .tx { font-size: 2.4rem}
.margin_btm10 { margin-bottom: 10px;}
.margin_btm20 { margin-bottom: 20px;}
.margin_btm30 { margin-bottom: 30px;}
.margin_btm40 { margin-bottom: 40px;}
.arrange { height: 1rem;vertical-align: middle;margin: -3px 5px 0 5px;}

/* header
****************************************************/
header { display:flex; justify-content:space-between; align-items: center;}
header a { text-decoration:none; transition:0.2s;}
header .logo { display:flex; width:350px; align-items:center; padding-left:20px;}
header .logo img { width:100%;}
header .sp_wrap { display:flex; align-items: center;}
header .btn_nav ul { display:flex;}
header .btn_nav ul a { padding:0; line-height:1; width:140px; font-size:1rem; font-weight:600; color:#fff; display:flex; flex-wrap:wrap; justify-content:center; align-content:center; padding: 20px 0;}
header .btn_nav ul a .tx { display:block; width:100%; text-align:center; margin-top:10px;}
header .btn_nav ul .recruit a { background:#3186c3; }
header .btn_nav ul .recruit a:hover { background:#266897; }
header .btn_nav ul .recruit a i { font-size: 1.7rem;}
header .btn_nav ul .contact a { background:#222; }
header .btn_nav ul .contact a:hover { background:#494949;}
header .btn_nav ul .contact a i { font-size: 1.7rem;}
header .tx_nav { align-content:center; margin-right: 40px;}
header .tx_nav a { color:#333; transition:0.2s;}
header .tx_nav .sub_nav, header .tx_nav .main_nav { width:100%; text-align:right;}
header .tx_nav .sub_nav > li { display:inline-block; margin-right:30px;}
header .tx_nav .sub_nav > li:last-of-type { margin-right:0;}
header .tx_nav .sub_nav > li > a { font-size:0.9rem;}
header .tx_nav .main_nav > li { display:inline-block; margin-right:35px;}
header .tx_nav .main_nav > li:last-of-type { margin-right:0;}
header .tx_nav .main_nav > li a { font-weight:600; font-size:1.25rem;}
header .tx_nav .main_nav > li > .wrap > a:hover { opacity: .7;}
header .tx_nav .sub_nav a:hover, header .tx_nav .main_nav > li > a:hover { opacity:0.6;}
.hamburger { display: none;}
header .tx_nav .main_nav.sub { margin-top: 30px;}

/* drop menu */
header .main_nav li.drop { position:relative;}
header .main_nav li.drop:hover > .drop_item { z-index:100; opacity:1;}
header .drop_item { z-index:-1; opacity:0; position:absolute; top: 30px; left:0; width:350px; transition:0.2s; padding: 15px 0;}
header .drop_item ul { padding: 0; background:rgba(0,0,0,0.7);}
header .drop_item li { border-bottom:1px dotted #aaa; text-align:left;}
header .drop_item li:last-of-type { border-bottom:0;}
header .drop_item li a { color:#fff!important; display:block; font-weight: 300 !important; font-size:1rem !important; padding:12px 25px 12px 15px; line-height:1.3; position:relative; transition:0.2s;}
header .drop_item li a:after { font-family:'Material Icons'; content:"\e315"; position:absolute; right: 10px; top:50%; font-size:1.2rem; line-height:1; margin-top:-0.6rem; color:#fff; font-weight:normal; transition:0.2s;}
header .drop_item li a:hover:after { right: 5px;}
header .drop_item li a .material-icons { font-size:16px;vertical-align:middle; margin: -3px 0 0 5px;}
header .drop_item li a:hover { background:rgba(0,0,0,0.5);}


/* footer
****************************************************/
footer { background: #eeeff0;}
footer .inner { width:1200px; margin:0 auto; }
footer .footer_top { padding:70px 0; }
footer .footer_top .inner { display:flex;}

footer .footer_top .info { margin-right: 100px;}
footer .footer_top .info .logo { width:300px; margin-bottom:40px; display:block;}
footer .footer_top .info .tx + .tx { margin-top:15px; text-decoration: none; color: #222;}
footer .footer_top .info .tx a { text-decoration: none; color: #222;}
footer .footer_top .info .tx i { margin:-5px 10px 0 0; vertical-align:middle;}
footer .footer_top .fnav { display: flex;}
footer .footer_top .fnav a { color:#333; text-decoration:none; transition:0.2s;}
footer .footer_top .fnav .column + .column { margin-left: 40px;}
footer .footer_top .fnav .group .name { font-weight:600; line-height:1.5;}
footer .footer_top .fnav .group ul { margin-top: 15px; padding-left:10px;}
footer .footer_top .fnav .group ul li { margin-bottom: 8px;}
footer .footer_top .fnav .group ul li:last-of-type { margin-bottom: 0; line-height:1.5;}
footer .footer_top .fnav .group + .group { margin-top: 20px;}
footer .footer_top .fnav a:hover { opacity:0.5;}

footer .footer_bottom { background:#111; font-size:0.9rem;}
footer .footer_bottom .inner { padding: 15px 0; display:flex; justify-content:space-between;}
footer .footer_bottom .fnav02 li { display:inline-block; }
footer .footer_bottom .fnav02 li + li { margin-left: 30px;}
footer .footer_bottom .fnav02 li a { color:#fff; transition:0.2s; text-decoration:none;}
footer .footer_bottom .fnav02 li a:hover { opacity:0.5;}
footer .footer_bottom .copyright { color:#fff;}

/* top
****************************************************/
header.top { background:rgba(255,255,255,0.6);}

.key_slider { overflow: hidden; position: relative;}
.key_slider .slider_cont { max-width: 100%; height: 700px;}
.key_slider .slider_cont .thum { display: block; width: 100%; height: 100%; object-fit: cover;}
.key_slider .slider_cont::after { content: ""; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-bottom: 550px solid #0c446d; border-left: 550px solid transparent; opacity: .6; z-index: 99;}
.key_slider .slider_cont::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 150px solid #2c85c5; border-right: 150px solid transparent; opacity: .6; z-index: 99;}

.key_slider .slick-dots { bottom: 35px !important;}
.slick-dots li button:before { color: #f5f5f5 !important;}
.slick-dots li.slick-active button:before { opacity: 1 !important; color: #fff !important;}
.slick-dotted.slick-slider { margin-bottom: 0 !important;}

.key_slider .slider_cont { position: relative;}
.key_slider .slider_cont .catch { position: absolute; bottom: 10%; right: 3%; width: 800px; z-index: 100;}
.key_slider .slider_cont .catch p.main { color: #fff; font-size: 3.6rem; line-height: 1.3; font-weight: 600; text-shadow: 1px 4px 7px rgba(0, 0, 0, 0.4); margin-bottom: 20px;}
.key_slider .slider_cont .catch p.sub { color: #fff; font-size: 1.2rem; font-weight: 600; text-shadow: 1px 4px 7px rgba(0, 0, 0, 0.4);}

#business { padding-top: 60px; margin-top: -60px; }



/* pan
****************************************************/
.pan { margin: 10px auto 0 auto; max-width: 1200px;}
.List-Item { display: inline; font-size: 0.9rem; color: #222;}
.List-Item::after { content: '/'; padding: 0 16px; }
.List02 .List-Item::after { content: '/'; }
.List-Item:last-child::after { content: ''; }
.List-Item-Link { text-decoration: none; color: #222;}
.List-Item-Link:hover { text-decoration: none; color: #2c85c5;}

/* business
****************************************************/
.business .gallery:nth-child(n + 3) { margin-top: 60px;}
.business .gallery .gallery_cont { display: flex; flex-wrap: wrap;}
.business .gallery .gallery_cont a { display: block; width: calc(( 102.5% - 60px )/2); margin-right: 30px; position: relative;}
.business .gallery .gallery_cont a:nth-child(2n) { margin-right: 0;}
.business .gallery .gallery_cont a:nth-child(n + 3) { margin-top: 30px;}
.business .gallery .gallery_cont a img { display: block; width: 100%; height: 100%;}
.business .gallery .gallery_cont a p { display: block; position: absolute; bottom: 0; left: 0; width: 100%; box-sizing: border-box; background: rgba(0,0,0,.7);color: #fff; padding: 10px 15px; font-size: 1.2rem;}
.business dl.consider:nth-child( n + 3 ) { margin-top: 40px;}
.business dl.consider dd:nth-child( n + 3 ) { margin-top: 30px;}
.business dl.consider dd ul { display: flex;}
.business dl.consider dd ul li { width: calc((100% - 20px)/2); margin-right: 20px;}
.business dl.consider dd ul li:last-of-type { margin-right: 0;}
.business dl.consider dd ul li > img { width: 100%;}

#baguetteBox-overlay .full-image img { height: 80% !important;}
#baguetteBox-overlay .full-image figcaption { padding: 20px 0 !important;}
body.baguetteBox-open { overflow: hidden;}


/* company
****************************************************/
.company dl { display: flex; padding: 20px 0;}
.company dl:nth-child(odd) { background-color: #F5F5F5;}
.company dl dt { width: 250px; font-weight: 600; padding-left: 30px; box-sizing: border-box;}
.company dl dd a { color: #5F9C1C; text-decoration: underline;}
.company dl dd a:hover { color: #5F9C1C; text-decoration: none;}

.company dd { width: 100%;}
.company dd ul { display: flex; flex-wrap: wrap;}
.company dd ul .licence  { display: flex; width: calc(( 100% - 80px) /2); border-bottom: 0.3px solid #f5f5f5; margin: 0 30px 15px 0; }
.company dd ul .licence:nth-child(even) { margin: 0 0 15px 0;}
.company dd ul li .licence-inr { width: 250px;}

.company .connection_company + .connection_company { margin-top: 15px;}

.philosophy { display: flex;}
.philosophy .policy { width: calc((100% - 40px)/3); margin-right: 20px; border-radius: 5px; border: 1px solid #3ca1e9; box-sizing: border-box; padding: 20px;}
.philosophy .policy:last-child { margin-right: 0;}
.philosophy .policy p { text-align: center; font-weight: 600; line-height: 1.6;}
.philosophy .policy p.number { font-size: 2rem; color: #3ca1e9;}
.philosophy .policy span { display: flex; justify-content: center; font-size: 6rem; color: #3ca1e9; margin-bottom: 5px;}

.philosophy dt p { letter-spacing: 2px;}
.philosophy dt .greeting { margin: 30px 0;}
.philosophy dt h3 { float: right; font-size: 1.8rem; font-weight: 600; margin-top: 15px; line-height: 1.4;}
.philosophy dt h3 small { font-size: 0.9rem;}



/* contact
****************************************************/
.contact h2 { font-size: 1.8rem; text-align: center; color: #fff; font-weight: 600; margin: 0 0 40px 0;}
.contact dl { display: flex; align-items: center; justify-content: space-between;}
.contact dl dt { border: 2px solid #fff; padding: 3px 40px;}
.contact dl dt i { font-size: 1.7rem; margin: 0 15px 0 0;}
.contact dl dt .contact_tel { font-size: 40px; font-weight: 600; color: #fff;}
.contact dl dt small { font-size: 1.2rem; color: #fff; padding: 0 0 0 43px;}
.contact dl dd .btn02 a { display: flex; text-decoration: none; justify-content: center; margin: 0 auto; padding: 1rem 2rem; width: 400px; height: 50px; font-size: 20px; align-items: center; color: #5F9C1C; font-weight: 600; border-radius: 5px; background-color: #fff; transition: 0.3s; position: relative;}
.contact dl dd .btn02 a::after { position: absolute; top: 45%; right: 15px; content: ''; width: 7px; height: 7px; border-top: 3px solid #5F9C1C; border-right: 3px solid #5F9C1C; transform: rotate(45deg);}
.contact dl dd .btn02 a:hover { display: flex; text-decoration: none; justify-content: center; margin: 0 auto; padding: 1rem 2rem; width: 400px; height: 50px; font-size: 20px; align-items: center; color: #fff; font-weight: 600; border-radius: 5px; background-color: #72be20; transition: 0.3s; position: relative;}
.contact dl dd .btn02 a:hover::after { position: absolute; top: 45%; right: 15px; content: ''; width: 7px; height: 7px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: rotate(45deg);}

.contact_inner h2 { text-align: center; font-size: 1.6rem; font-weight: 600;}
.contact_inner section dl { display: flex;}
.contact_inner section dl a { font-size: 1.3rem; width: calc((100% - 60px)/3); margin: 0 30px 0 0; border-radius: 5px; color: #fff; padding: 40px; text-decoration: none; font-weight: 600; text-align: center; transition: 0.3s;}
.contact_inner section dl a dt { display: grid; }
.contact_inner section dl a:nth-child(1) { background-color: #D9830D;}
.contact_inner section dl a:hover:nth-child(1) { background-color: #ffa11d;}
.contact_inner section dl a:nth-child(2) { background-color: #569D22;}
.contact_inner section dl a:hover:nth-child(2) { background-color: #7fc34e;}
.contact_inner section dl a:last-child { margin: 0; background-color: #41740A;}
.contact_inner section dl a:hover:last-child { background-color: #618837;}
.contact_inner section dl a .material-symbols-outlined { font-size: 4rem; color: #fff; margin-bottom: 20px;}

.form_inner { display: flex; padding: 30px 0; border-top: 1px solid #cecece; border-bottom: 1px solid #cecece; margin-top: -1px; align-items:center; justify-content:space-between; }
.form_inner .title_column { width:250px; position:relative; padding: 0 15px; box-sizing: border-box;}
.form_inner .title_column.required:after { content:"必須"; font-size: 0.7rem; display:inline-block; padding:2px 5px; background: rgb(215,0,0); color:#fff; position:absolute; right:0; top:3px; border-radius: 5px;}
.form_inner .title_column .form_title { font-weight: 600;}
.form_inner input::placeholder { color: rgb(144, 144, 144);}
.form_inner .detail_column { width:calc( 100% - 250px - 30px); position:relative; padding: 0 15px 0 0; box-sizing: border-box;}
.form_inner .detail_column input,
textarea  { display: block; background-color: rgb(248 248 248); border-radius: 5px;}
.form_small { width: 200px;}
.form_wide { width: 300px;}
.form_full ,textarea { width: 100%; box-sizing: border-box;}

.classification { display: flex;}
.classification_btn { width: 200px;}
.classification input[type="radio"] { display: none;}
.classification  input + label { background: #fff; display: flex; align-items: center; justify-content: center; height: 50px; cursor: pointer; padding: 0 15px; border: 1px solid #cecece; border-right: 0;}
.classification div:first-of-type input + label { border-radius: 5px 0 0 5px;}
.classification div:last-of-type input + label { border-radius: 0 5px 5px 0; border-right: 1px solid #cecece;}
.classification input:checked + label { background: #5F9C1C; color: #fff;}

.form_detail {font-size: 0.85rem; color: rgb(91, 91, 91); padding: 5px 0 0 5px;}
.address input + input {margin-top: 1rem;}


/* error */
.error_display { background: rgb(255 250 250); border: 1px solid rgb(215,0,0); padding: 20px 15px; margin: 20px 0;}
.error_display p { font-size: 1.1rem; font-weight: 600; color: rgb(215, 0, 0);}
.error { background-color: rgb(255, 224, 224)}
.error .error_txt { color: rgb(215, 0, 0); font-weight: 600; padding: 5px 0 0 5px;}

/* confirmation */
.confirmation { display: flex; justify-content: center;}
.confirmation .confirmation_btn { margin: 0 20px 0 0; background: #222; transition: 0.3s;}
.confirmation .confirmation_btn:hover { background: rgb(110, 110, 110);}
.confirmation .confirmation_btn02{ background-color: #3ca1e9; transition: 0.3s;}
.confirmation .confirmation_btn02:hover { background: #3186c3;}
.confirmation .confirmation_btn ,
.confirmation .confirmation_btn02 { display: inline-block; width: 300px; font-weight: 600; text-align: center; padding: 1.3rem 0; text-decoration: none; color: #fff; border-radius: 5px; margin-top: 40px; border: 0; cursor: pointer;}

/* thanks */
.thanks_txt { text-align: center; margin-top: 40px;}
.btn_area.confirmation { margin-top: 0;}



/* フォーム無しver */
.contact2 .catch01 { text-align:center; font-size:1.6rem; font-weight:700; line-height:1.7; margin-bottom:80px;}
.contact2 .column2_wrap { display:flex; justify-content:space-between; margin-bottom:100px;}
.contact2 .column2_wrap  .item { width:calc( ( 100% - 50px ) / 2 ); border:3px solid #3186c3; padding:40px; box-sizing:border-box; text-align:center;}
.contact2 .column2_wrap  .item .ttl { font-size:1.5rem; font-weight:700; color:#3186c3;}
.contact2 .column2_wrap  .item .number { font-size:3.0rem; font-weight:700; color:#3186c3; line-height:1; margin:20px 0 30px;}
.contact2 .column2_wrap  .item .mail { font-size:2.0rem; font-weight:700; color:#3186c3; line-height:1; margin:25px 0 30px;}



/* recruit
****************************************************/
.recruit .img_desc_box02 { display:flex; flex-direction:row-reverse}
.recruit .img_desc_box02 .image { width:calc( ( 100% - 70px ) / 2 ); height:500px; display:flex;}
.recruit .img_desc_box02 .image img { object-fit:cover;}
.recruit .img_desc_box02 .tx_area { width:calc( ( 100% - 70px ) / 2 ); display:flex; padding: 0 4% 0 0; margin-left: 8%; align-content:center; flex-wrap:wrap;}
.recruit .img_desc_box02 .tx_area .ttl { width:100%;}
.recruit .img_desc_box02 .tx_area .desc { width:100%;}
.recruit .img_desc_box02 .tx_area .btn_area { margin-top:40px;}
.recruit .recruit_title { font-size: 2.2rem;}

.section_title .square_recruit, .section_title .square_recruit:before, .section_title .square_recruit:after { width:12px; height:7px; content:''; display:inline-block;}
.section_title .square_recruit { width: 12px; height: 7px; content: ''; display: inline-block; background: #013d9d; position: relative;}
.section_title .square_recruit:before { background: #205ab6; position: absolute;left: -17px; top: 0;}
.section_title .square_recruit:after { background: #496593; position: absolute; right: -17px; top: 0;}

.cont_title01 .square_recruit, .cont_title01 .square_recruit:before, .cont_title01 .square_recruit:after { position:absolute; width:12px; height:7px; content:''; display:inline-block;}
.cont_title01 .square_recruit { background:#013d9d; bottom:0; left:0;}
.cont_title01 .square_recruit:before { background:#205ab6; bottom:0; left:17px;}
.cont_title01 .square_recruit:after { background: #496593; bottom:0; left:34px;}

.recruit_cont ul li .title { font-size: 1.2rem; border-left: none; padding: 0;}
.recruit_cont .item { padding: 20px 0; border-top: 1px solid #CECECE;}
.recruit_cont .item:last-child { border-bottom: 1px solid #CECECE;}
.recruit_cont .item .title { cursor: pointer;  position: relative; font-size: 1.2rem; font-weight: 600; border-left: 5px solid #6d7683; padding: 0 0 0 15px;}
.recruit_cont .item .title .arrow { position: absolute; right:10px; top:8px; transition:0.2s; display: inline-block; width: 10px; height: 10px; margin: 0 10px; border-bottom: 4px solid #6d7683; border-right: 4px solid #6d7683; transform: rotate(45deg);}
.recruit_cont .item.active .title .arrow { transform:rotate(-135deg);}

.recruit_cont .detail { display: none;  margin-top: 20px;}
.recruit_cont .detail dl { display: flex; padding: 20px;}
.recruit_cont .detail dl:nth-child(odd){ background-color: #f5f5f5;}
.recruit_cont .detail dl dt { width: 180px; font-weight: 600;}
.recruit_cont .detail dl dd { line-height: 2rem;}


/******************************************************************************************
 small display, TABLET
*******************************************************************************************/
@media screen and (max-width: 1100px){
    /* common
    ****************************************************/
    .company_btn { display: block; margin: 0 0 30px 0;}
    .company_btn .btn_area { width: 100%;}
    .company_btn .btn_area:last-child { margin-bottom: 0;}
    .company_btn .btn_area .btn { width: 100%; box-sizing: border-box;}
    .large_btn { font-size: 1rem;}
    .large_btn:after { font-size: 2rem; right: -2px; top: 48%;}
    .key_title { padding-top: 70px; display: flex; height: 160px;}
    .key_title img { object-fit: cover;}
    .key_title h1 { transform: translate(-50%,7%);}
    .key_title h1 .tx { width: 350px; font-size: 1.6rem; margin-bottom: 0;}
    .btn_area a { width: 200px;}


    /* layout
    ****************************************************/
    .container { padding: 40px 0; }
    .cont_block + .cont_block { margin-top: 40px;}
    .pc_content { display: none;}
    .sp_content { display: block;}
    .common_inner , .common_inner_narrow{ width: 100%; padding: 0 15px;}
    .btn.large { min-width: 300px;}
    .cont_desc { text-align: start; font-size: 0.85rem; margin-bottom: 40px;}
    .common_catch { text-align: start; line-height: 1.4;}
    .underlayer .section_title .tx { font-size: 1.4rem;}
    .title h3 { font-size: 1.15rem; padding-bottom: 10px; margin-bottom: 20px;}
    .title h4 { font-size: 1rem; padding: 5px 15px;}



    /* pankuzu
    ****************************************************/
    .pan a, .pan span { font-size: 0.7rem;}


    /* header
    ****************************************************/
    header { height: 70px; width: 100%; position: fixed; background: #fff; z-index: 999999;}
    header .logo { width:200px; align-items:center; padding-left:13px;}
    .hamburger { display: block; cursor: pointer; z-index: 9999; transition: 0.1s;}
    .inner_line { display: block; position: absolute; right: 15px; width: 30px; height: 3px; background-color: #222; transition: 0.4s; border-radius: 4px;}
    #line1 { top: 23px;}
    #line2 { top: 33px;}
    #line3 { top: 43px;}
    header.active .hamburger #line1 {  transform: rotate(45deg); top: 33px;}
    header.active .hamburger #line2 { opacity: 0;}
    header.active .hamburger #line3 { transform: rotate(-45deg); top: 33px}

    header .nav_wrap {display: none; position: fixed;  width: 100%; height: 100%; top: 0; background: #fff; overflow: auto;}
    header .nav_wrap .sp_wrap { display: flex;  width: 100%; flex-wrap: wrap;}
    header .tx_nav { margin: 0; width: 100%; padding: 20px 15px; order: 2;}
    header .tx_nav .sub_nav, header .tx_nav .main_nav { text-align: start;}

    header .tx_nav .main_nav > li > .wrap > a { display: block; width: 100%; font-size: 1rem; padding: 10px 0 10px 5px; box-sizing: border-box;}
    header .drop .wrap > a:after { font-family: 'Material Icons'; content: "\e315"; position: absolute; right: 10px; top: 50%; font-size: 1.2rem; line-height: 1; margin-top: -0.6rem; color: #222; font-weight: normal; transition: 0.2s;}

    header .tx_nav .main_nav { order: 1; margin-top: 0;}
    header .tx_nav .main_nav > li { display: block; margin: 0; border-top: 1px solid #222;}
    header .tx_nav .main_nav > li:last-child { border-bottom: 1px solid #222; }
    header .tx_nav .main_nav > li > a { display: block; width: 100%; font-size: 1rem; padding: 10px 0 10px 5px; box-sizing: border-box;}
    header .tx_nav .main_nav > li > .wrap > a { display: block; width: 100%; font-size: 1rem; padding: 10px 0 10px 5px; box-sizing: border-box;}

    header .btn_nav { width: 100%; padding: 100px 15px 20px 15px; order: 1;}
    header .btn_nav ul li { width: calc(100%/2);}
    header .btn_nav ul a { width: 100%;}

    header .btn_nav ul { display: flex;}
    header .btn_nav ul li { display: flex; width: 100%;}
    header .btn_nav ul a { height: 60px;}
    header .btn_nav ul .recruit a,
    header .btn_nav ul .contact a { width: 100%;}
    header .btn_nav ul a .tx { width: auto; margin-top: 7px; margin-left: 7px;}
    header .drop_item { transition:none;}
    header .drop .wrap > a { pointer-events: none; position: relative;}
    header .drop .wrap > a:after { font-family:'Material Icons'; content:"\e315"; position:absolute; right:10px; top:50%; font-size:1.2rem; line-height:1; margin-top:-0.6rem; color:#222; font-weight:normal; transition:0.2s;}
    header .drop_item { display: none;position: static; width: 100%; opacity: 1; padding: 0 0 15px 0;}
    header .drop_item ul { box-shadow: none; pointer-events: auto; background: #fff;}
    header .drop_item li a:after { display: none;}
    header .drop_item ul li a {  color: #222 !important;}


    /* footer
    ****************************************************/
    footer .footer_top .inner { display: block; width: 100%; padding: 0 15px; box-sizing: border-box;}
    footer .footer_top .fnav { display: none;}
    footer .footer_top .info { width: 100%;}
    footer .footer_bottom .inner { width: 100%; padding: 15px 0;}
    footer .footer_bottom .fnav02 { display: none;}
    footer .footer_bottom .copyright { margin: 0 auto; }

    /* top
    ****************************************************/
    header.top { background:rgba(255,255,255,0.6);}
    .key_slider .slider_cont::after { border-bottom: 360px solid #0c446d; border-left: 190px solid transparent;}
    .key_slider .slider_cont .catch { width: 300px; bottom: 10%;}
    .key_slider .slider_cont .catch p.main { font-size: 2rem;}
    .key_slider .slider_cont .catch p.sub { font-size: 1rem; bottom: 13%;}

    .img_desc_box { display: block;}
    .img_desc_box .image { width: 100%; height: 100%; display: block;}
    .img_desc_box .tx_area { width: 100%; padding: 40px 15px;}
    .img_desc_box .tx_area .btn_area { margin: 40px auto 0 auto;}
    .top_page .img_desc_box .tx_area { padding-right: 15px !important;}
    .top_page .img_desc_box .tx_area p { height: 400px}
    .cont_title01 { font-size: 1.05rem;}
    .section_title .tx { font-size: 2.2rem;}

    .img_nav01 { display:block;}
    .img_nav01 li { width:100%; margin: 0 0 15px 0;}
    .img_nav01 li:nth-of-type(n + 2) { margin-top: 0px;}

    .img_nav01 li .tx_area { height: 68.39px; padding: 15px;}
    .img_nav01 li .tx_area .tx01 { font-size: 0.8rem;}
    .img_nav01 li .tx_area .tx02 { font-size: 1.1rem;}


    .img_nav02 { padding: 10px;}
    .img_nav02 li { width: 100%; margin-right: 0;}
    .img_nav02 li:nth-child(-n+2) { margin-bottom: 10px;}
    .img_nav02 li:last-child { margin-top: 10px;}
    .img_nav02 li a .tx01 { font-size: 1.3rem;}

    .column3_bnr li { width: 100%; margin: 0;}
    .column3_bnr li:nth-child(-n+2) { margin-bottom: 15px;}
    .column3_bnr { display: block;}

    #business { padding-top: 40px; margin-top: -40px}
    .company_btn .btn_area .btn02 { margin: 0 0 15px 0;}

    iframe { width: 100%;}

    /* company
    ****************************************************/
    .company dl { display: block; padding: 15px;}
    .company dl dt { width: 100%; padding-left: 0;}

    .philosophy { display: block;}
    .philosophy .policy { width: 100%; margin-right: 0;}
    .philosophy .policy:nth-child( n + 2 ) { margin-top: 10px;}

    .company_btm { margin-bottom: 110px;}
    .philosophy dt h3 { font-size: 1.25rem;}


    /* business
    ****************************************************/
    .business .gallery .gallery_cont a { width: calc(( 100% - 10px )/2); margin-right: 10px;}
    .business .gallery .gallery_cont a:nth-child(n + 3) { margin-top: 10px;}
    .business .gallery .gallery_cont a p { font-size: .7rem; padding: 5px;}
    #baguetteBox-overlay .full-image img { max-height: 25% !important;}
    .business dl.consider:nth-child( n + 3 ) { margin-top: 40px;}
    .business dl.consider dd { font-size: .88rem; }
    .philosophy dt p { font-size: .88rem;}
    .business dl.consider dd ul { display: block;}
    .business dl.consider dd ul li { width: 100%; margin-right: 0;}
    .business dl.consider dd ul li + li { margin-top: 20px;}
    .business dl.consider dd ul li > img { width: 100%;}


    /*contact
    ****************************************************/
    .contact_inner h2 { font-size: 1.1rem;}
    .contact_inner section dl { display: grid;}
    .contact_inner section dl a { width: 100%; box-sizing: border-box; margin: 0 auto 20px auto; padding: 20px 0;}
    .contact_inner section dl a:last-child { margin: 0 auto;}
    .contact_inner section dl a dt { width: 240px; font-size: 1rem; display: flex; margin: 0 auto; align-items: center;}
    .contact_inner section dl a .material-symbols-outlined { font-size: 2rem; margin-bottom: 0; margin-right: 10px;}
    .error_display p { font-size: 0.75rem;}
    .form_inner { display: block;}
    .form_inner .detail_column { width: 100%; padding: 0;}
    .form_inner .title_column { width: 100%; padding: 0 0 20px 0;}
    .form_inner .detail_column input, textarea { width: 100%}
    .form_full, textarea { font-size: 0.9rem;}
    .confirmation { display: block;}
    .confirmation .confirmation_btn, .confirmation .confirmation_btn02 { width: 100%;}
    .thanks_txt { font-size: 0.9rem;}

	/* フォーム無しver */
	.contact2 .catch01 { font-size:1.2rem; margin-bottom:40px;}
	.contact2 .column2_wrap { display:block; margin-bottom:60px;}
	.contact2 .column2_wrap  .item { width:auto; padding:30px 20px; margin-bottom:30px;}
	.contact2 .column2_wrap  .item .ttl { font-size:1.2rem;}
	.contact2 .column2_wrap  .item .number { font-size:2.0rem; margin:20px 0 15px;}
	.contact2 .column2_wrap  .item .mail { margin:25px 0 10px;}
	.contact2 .column2_wrap  .item .desc { font-size:1rem;}



    /* recruit
    ****************************************************/
    .recruit_title { font-size: 1.3rem;}
    .recruit .img_desc_box02 { display: block; }
    .recruit .img_desc_box02 .image { width: 100%; display: block; height: 100%;}
    .recruit .img_desc_box02 .tx_area { width: 100%; display: block; padding: 0 10px; margin-top: 30px; margin-left: 0; box-sizing: border-box;}
    .recruit_cont .item { padding: 20px 0;}
    .recruit_cont .item .title { font-size: 1rem;}
    .recruit_cont .detail dl { display: block; padding: 15px;}
    .recruit_cont .item .title .arrow { top: 3px;}
    .recruit_cont .item.active .title .arrow { top: 10px;}

}

/******************************************************************************************
 SP
*******************************************************************************************/
@media screen and (max-width: 640px){
    .slider_cont .thum01 { object-position: -610px 60px;}
    .slider_cont .thum02 { object-position: -170px;}
    .slider_cont .thum03 { object-position: -640px;}
    .slider_cont .thum04 { object-position: -570px;}
    .slider_cont .thum05 { object-position: -610px;}

}