@charset "UTF-8";


.sp-hide{ display: block;}
.sp-hide-inline{ display: inline;}
.sp-hide-tbcell { display: table-cell; }
.sp-show{ display:none;}
.sp-show-inline{ display:none !important;}



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


/* main-layout
==========================================================*/

.wrap{ margin:0 auto; width: 94%; }

#mainBox { -moz-width: calc(100% - 210px); -webkit-width: calc(100% - 210px); width: calc(100% - 210px); }
#subBox { width: 180px;}

/* header
==========================================================*/

#header { width: 96%;}
  #menu ul { width: 100%; border-right: none;}
  #menu li { -moz-width: calc(100% / 6); -webkit-width: calc(100% / 6); width: calc(100% / 6);}
  #menu ul li:nth-child(2) { border-left: none;}
  #menu li a { font-size: 13px;}


/* footer
==========================================================*/

#foot_nav { margin-top: 15px;}
	#foot_nav li { font-size: 13px;}
  #foot_nav li a { padding: .5em .5em;}


/* index
==========================================================*/

#ind_mainvisual { margin-bottom: 50px;}
  #ind_mainvisual ul .slick-list .slick-track { height: -moz-calc(100vh - 164px); height: -webkit-calc(100vh - 164px); height: calc(100vh - 164px); }

  .ind_maincopy { position: absolute; top: 10%; left: 5%;}
    .ind_maincopy p { font-size: 13vw; line-height: 1;}

  .ind_bnrbox ul li { float: left; -moz-width: calc((100% / 3) - 10px); -webkit-width: calc((100% / 3) - 10px); width: calc((100% / 3) - 10px);}
    figure p { transform: translateY(35%);}
    figure p span { font-size: 20px;}


/* kasou COMMON
==========================================================*/

  .kasou_mainvidualInner h1 { font-size: 52px; line-height: 1.3;}


/* COMPANY
==========================================================*/

	#company-page table.about_overview_table th { width: 25%;}
  .mapBox iframe { width: 100%;}


/* CONTACT
==========================================================*/


table.inqtable th { padding: 10px 20px; width: 100%; display: block;}
table.inqtable td { border-left: solid 1px #EEEEEE; width: 100%; display: block;}


table.inqtable td input[type="text"] , table.inqtable td textarea { width: 75%;}
table.inqtable td textarea { width: 100%;}

/* .contfrm .note p:nth-child(2) { margin-bottom: 30px; color: #D81919;}

.contfrm { margin: 0; }
table.inqtable { width: 100%; margin: 0 0 40px; border-top: solid 1px #EEEEEE; }
table.inqtable th { padding: 20px 20px; border-bottom: solid 1px #fff; background: #EEEEEE; width: 220px; box-sizing: border-box;}

table.inqtable th span.hissu { display: inline-block; margin-left: 1em; color: #fff; background: #D81919; font-size: 10px; vertical-align: inherit; text-align: center; padding: 2px 6px;}

table.inqtable td { padding: 20px 20px; margin: 0 auto; border-bottom: solid 1px #EEEEEE; border-right: solid 1px #EEEEEE; box-sizing: border-box;}

  table.inqtable td input[type="text"] , table.inqtable td textarea { border: solid 1px #CCCCCC; padding: 5px 7px; width: 290px; border-radius: 2px;}
  table.inqtable td textarea { width: 420px;}
  table.inqtable td input[type="text"]::-webkit-input-placeholder , table.inqtable td textarea::-webkit-input-placeholder { color: #CCCCCC; }
  table.inqtable td input[type="text"]::-moz-placeholder , table.inqtable td textarea::-moz-placeholder { color: #CCCCCC; }
  table.inqtable td input[type="text"]:-moz-placeholder , table.inqtable td textarea:-moz-placeholder { color: #CCCCCC; }
  table.inqtable td input[type="text"]:-ms-input-placeholder , table.inqtable td textarea:-ms-input-placeholder { color: #CCCCCC; }

  table.inqtable td input#postcode {width: 341px;}
  table.inqtable td .addbox {margin:1em 0;}
  table.inqtable td label {line-height: 48px;}

.contact_grc { margin: 0 auto 30px; width: 300px;}

.submitbtm {   margin: 40px auto; text-align: center;  }
  .submitbtm button { border: solid 2px #0F4D7C; margin: 0; padding: 8px 0; width: 320px; color: #0F4D7C; font-size: 20px; font-weight: bold; cursor: pointer; text-align: center; background: #fff; border-radius: 150px; transition: .3s; letter-spacing: .1em;}
  .submitbtm button span { font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic",  Helvetica, Arial, sans-serif;}
  .submitbtm button:hover { background: #0F4D7C; color: #fff; }


.error_box { width:86%; text-align: left; background: #FFF; border: 1px solid #D81919; color:#D81919; display:none; margin:35px 0; padding:10px 12px;}

.sendcomplete {margin: 30px 0; } */



}


/* sp
==========================================================*/

/*

font size
83〜85%程度
（24px-->20px）

*/


@media screen and (min-width: 751px) {

  #menu { display: block !important;}

}


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

/* Base Setting
==========================================================*/

.sp-hide-inline,
.sp-hide-tbcell,
.sp-hide{ display: none;}
.sp-show{ display:block;}
.sp-show-inline{ display:inline !important;}

.sp-br-none br{ display: none; margin-left: -0.1em;}

.col-l{ float: none; width: 100%;}
.col-r{ float: none; width: 100%;}



/* main-layout
==========================================================*/

body	{ display:block;}

#wrapOuter { margin-top: 20px;}
  .wrap{ margin:0 auto; width: 94%; }

  #mainBox { width: 100%;}
  #subBox { display: none;}


/* header
==========================================================*/

#header { width: 100%; height: 60px;}
  .head_logo { padding: 0; line-height: 60px; }
  .head_logo img { width: 160px; vertical-align: middle; margin-left: 16px;}


#menu { position: fixed; top: 0; left: 0; width: 100%; display: none; height: 100vh; z-index: 9991;background: #fff;}
  #menu .menuInner { height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; overflow-x: hidden;}
  #menu ul { width: 100%; margin: 0 auto 0; border-right: none; box-sizing: border-box; border-top: 1px solid #222; padding-bottom: 40vh;}
  #menu li { float: none; width: 100%; border-left: none; text-align: left; border-bottom: 1px solid #222; height: auto;}
  #menu li a { display: block; color: #222; font-weight: bold; font-size: 16px; padding: .8em 1em .7em; line-height: 1.1; position: relative;}
    #menu li a::after { font-family: 'FontAwesome'; content: "\f105"; position: absolute; top: 50%; right: 1em; margin-top: -12px;}
  #menu li a span{ font-family: 'Josefin Sans', sans-serif; font-size: 10px; color: #96820C; font-weight: normal;}


.sp-menu-logo a { line-height: 60px;}
.sp-menu-logo img { vertical-align: middle; margin-left: 16px;}





  .navInner { display: block; position: absolute; right: 20px; top: 20px; z-index: 9999;}
  .menu-trigger { width:24px; height: 20px; line-height: inherit; cursor: pointer; position:relative; z-index: 9999;}
  .menu-trigger.active { margin-left: 0px;}
  .menu-trigger,
  .menu-trigger span { display: inline-block; transition:all .4s; box-sizing: border-box; }
  .menu-trigger span{ position: absolute; left: 0; width: 100%; height: 2px; background-color: #222; border-radius: 10px;}
  	.menu-trigger span:nth-of-type(1){top:0}
  	.menu-trigger span:nth-of-type(2){top:9px}
  	.menu-trigger span:nth-of-type(3){bottom:0}
  	.menu-trigger:not(.active):hover span:nth-of-type(1){top:2px}
  	.menu-trigger:not(.active):hover span:nth-of-type(3){bottom:2px}
  	.menu-trigger.active span:nth-of-type(1){-webkit-transform:translateY(9px) rotate(-45deg);transform:translateY(9px) rotate(-45deg); background-color: #222;}
  	.menu-trigger.active span:nth-of-type(2){opacity:0}
  	.menu-trigger.active span:nth-of-type(3){-webkit-transform:translateY(-9px) rotate(45deg);transform:translateY(-9px) rotate(45deg); background-color: #222;}




/* footer
==========================================================*/

#footerContainer { margin-top: 15%;}

.page_top { width: 50px; margin-bottom: 0; position: fixed; right: 0; bottom: 0;}

#foot_nav { text-align: left; margin-bottom: 0; margin-top: 0; border-top: 1px solid #222;}
	#foot_nav li { display: block; font-size: 13px; }
	#foot_nav li::before { content: none;}
  #foot_nav li a { padding: .8em 1em .7em; display: block; border-bottom: 1px solid #222; position: relative;}
  #foot_nav li a::after { font-family: 'FontAwesome'; content: "\f105"; position: absolute; top: 50%; right: 1em; margin-top: -12px;}

#footer { background: #222; color: #fff; padding: 30px 0 25px; text-align: center;}
  #footer .address p { font-size: 12px;}
  #footer .address p:first-child { font-size: 15px;}



/* index
==========================================================*/

  #ind_mainvisual { margin-bottom: 5%;}
    #ind_mainvisual ul .slick-list .slick-track { height: -moz-calc(100vh - 60px); height: -webkit-calc(100vh - 60px); height: calc(100vh - 60px); }
    #ind_mainvisual ul li { min-height: auto !important;}
    #ind_mainvisual ul li:nth-child(1) { background-position: 40% center;}
    #ind_mainvisual ul li:nth-child(2) { background-position: 65% center;}
    #ind_mainvisual ul li:nth-child(3) { background-position: center center;}

  #ind_maincopy { position: absolute; top: 10%; left: 8%;}
    #ind_maincopy p { font-size: 15vw; line-height: 1.1;}


.ind_bnrbox { margin-top: 20px;}
  .ind_bnrbox ul li { float: none; width: 100%; margin-right: 0; margin-bottom: 15px;}

  figure { max-width: 100%; max-height: 180px; width: 100%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); }

    figure img { width: 100%; position: relative; opacity: 1; top: -100px;}
        @media screen and (max-width: 600px) {
          figure img { top: -40px;}
        }
        @media screen and (max-width: 400px) {
          figure img { top: 0px;}
        }

    figure p { transform: translateY(40%);}



/* kasou COMMON
==========================================================*/

  .kasou_mainvidualInner { padding: 40px 0; text-align: center;}
  .kasou_mainvidualInner h1 { font-size: 24px;}
  .kasou_mainvidualInner p { font-size: 10px;}

.h2box h2 { font-size: 17px; margin-bottom: 20px; padding-left: .2em; padding-bottom: .1em;}
  .h2box span { display: none;}
  .h2box h2:after { width: 20%;}

/* .cntBox { margin-bottom: 60px;} */


/* PHILOSOPHY
==========================================================*/


#philosophy-page #philosophy .content p { font-size: 15px; margin-bottom: 0;}

#philosophy-page #vision .content p { font-size: 15px; margin-bottom: 20px;}
  #philosophy-page #vision .content p span { font-size: 17px;}
  #philosophy-page #vision .content div { margin-top: 10%;}



/* SERVICE
==========================================================*/

#service-page .content .service_imgBox { margin-top: 10%; margin-bottom: 20%;}

.rate { padding: 5%;}
  .rate p { font-size: 16px; margin-bottom: 10px;}

/* COMPANY
==========================================================*/

#company-page #message .content img { width: 200px; }

#company-page table.about_overview_table { font-size: 13px;}
	#company-page table.about_overview_table th { width: 25%;}
	#company-page table.about_overview_table td { padding: 10px 15px;}

  .mapBox iframe { height: 320px;}


/* FAQ
==========================================================*/

  #faq-page #faq dl dt::before { left: -42px;}
  #faq-page #faq dl dd::before {left: -42px;}


/* PRIVACYPOLICY
==========================================================*/

  #privacypolicy-page #privacypolicy dl dt { margin-bottom: 0; font-size: 15px;}




/* CONTACT
==========================================================*/

.contfrm .note p:nth-child(2) { margin-bottom: 20px;}

table.inqtable { margin: 0 0 30px;}

table.inqtable th { padding: 8px 10px; }
table.inqtable td { padding: 15px 10px; }

table.inqtable td input[type="text"] , table.inqtable td textarea { width: 90%; display: block; padding: 5px; font-size: 1.2em;}
table.inqtable td textarea { width: 100%;}

.submitbtm { margin: 30px auto 0;}
.submitbtm button { width: 90%; font-size: 18px; padding: 6px 0;}





}