@charset "utf-8";

html {  }
body { margin: 0 ; }
.sp {display: none;}
a { transition-property: all;transition: 0.3s linear; }
a:focus, *:focus { rgba(255,255,255,0) }
a:active, *:active { rgba(255,255,255,0) }

/**********************************************************************　大枠デザイン　*******************************************************************************/

header { max-width: 1280px; width: 98% ; margin: 0 auto ; }
.site-content-contain,
body.org section { max-width: 1280px; width: 98% ; margin: 0 auto ; }
footer { max-width: 1280px; width: 98% ; margin: 0 auto ; }

section main.swiper { width: 77% ; margin: 0 1.5% 0 0 }

.footer-box { width: 77% ; margin: 80px 0 80px 23% ; font-size: 0.9em; height: 60px }
body#index .footer-box { margin: 80px 0 80px 21% ; }

body.org section main { font-size: 0.95em ; line-height: 1.8em ; position: relative }


/***** 　　　　　左右1366で縛るかどうか？ 　　　　　　*****/ 

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

/**********************************************************************　デザイン　*******************************************************************************/

.h1-pad p.eng ,
.h1-pad h1
{ position: absolute ; z-index: 10 }

div#bread.abso { right: 0 ; top: -30px ; display: inline; font-size: 0.9em }
div#bread.abso i{ padding: 0 5px ; color: #999 }

.f-l, .detail-l ,.thl { float: left } .f-r, .detail-r ,.tdl { float: right}

.swiper-container { width: 100% ; margin: 0 auto ; padding: 0 0 10px 0 ; background-color: #fff }
.swiper-container-horizontal > .swiper-pagination { bottom: 0px;}
.pagination-num { bottom:0px }
.swiper-slide .abso { text-align: left}

.f-r { width: 74.6% ; margin: 0 1.5% 0 0 }
.f-l { width: 19% ; padding: 0 0 0 1.5% }
.boder-box { width: 80% ; margin: 50px 0 0 20% ; }
.f-l.half { width: 48% ; padding: 0 calc( 2% - 4px ) 0 0 }
.f-r.half { width: 48% ; padding: 0 0 0 calc( 2% - 4px ) }

.detail-box { clear: both ; padding: 0 0 20px 0 }
.detail-box .detail-l { width: 55% ; padding: 0 3% 0 12%; border-right: 1px solid #ccc /**/ }/*width: 60%*/
.detail-box .detail-r { width: 27% ; }/*width: 36%*/
.detail-box ul { padding-top: 20px }

.tbl { margin: 0 0 10px 0 ; border-bottom: solid 1px #d1d5db ; }
.thl { clear: both ; width: calc( 20% - 4px ) ; border-top: solid 1px #ccc ; padding: 15px 4px 15px 0 }
.tdl { width: calc( 80% - 4px ) ; border-top: solid 1px #ccc ; padding: 15px 0 15px 4px }
#history .thl, #recruit .thl { width: calc( 20% - 4px ) }
#history .tdl, #recruit .tdl { width: calc( 80% - 4px ) }
.clb { clear: both ; border-top: solid 1px #d1d5db ; padding: 8px 4px 8px 0 }
.clb.boshu { text-align: left ; padding-left: 5px ; margin-top: 5px }
.whtpc { color: #fff }

.exam { padding: 0 ; margin: 0 0 20px ; text-align: left ; font-size: 0.9em ; line-height: 0.9em } /* border: solid 1px #ccc ; */
.exam.nigyo { padding: 0 ; margin: 0 0 20px ; line-height: 1.4em } 

.gaiyo ul.maru { border-top: dashed #ccc 1px ; }
.detail-r ul.maru { padding-top: 0 !important; }

.flow-box span.eng { font-size: 1.6em ; line-height: 2.0em ; }
#topthumb h3 { font-size: 1.2em;line-height: 1.2em ; padding: 5px 0 5px ; margin: 0 }
#topthumb img { width: 100% ; height: auto; padding: 0 0 10px 0 ;  }
.bttxt { display: block }
#overview .sub img { width: 80% ; padding: 0 0 10px }


/**********************************************************************  パレット  *******************************************************************************/

.palette-pad { padding: 0 1.5% }
.palette-pad  h1{ padding: 0 0 0 0 }
.h2-pad { padding: 40px 0 40px 0 ; margin: 30px 0 0 0 }

.h1-pad p.eng  { left: 20px ; top :20px ; font-size: 2.5em ; line-height: 1em }
.h1-pad h1 { left: 20px ; top :60px ; font-size: 1.1em ; line-height: 1em }
#house .h1-pad p.eng , #house .h1-pad h1 {  } 

#secondary section,
.post,
.palette
{ padding: 1.5% ; font-size: 0.9em ; line-height: 1.8em }

.palette-box { width: 100% ; display:table; border-spacing: 0 0 ; }
.palette { display:table-cell ; vertical-align: top}

#page { margin: 0 ; padding: 0 }

.palette { width: 25% }/*width: calc( 25% - 2px )*/
.palette.five { width: 20% }
#faq .palette.five { width: 10% }
.palette.half { width: 50% }
.palette.full { width: 100% }
.palette.sanni{ width: 66.66% }
.palette.sanichi{ width: 33.33% }
.palette.goni{ width: 40% }
.palette.gosan{ width: 60% }
.palette.goyon{ width: 80% }
#faq .palette.goyon{ width: 90% }
.palette.thumb{ width: 16.66666666% }

/*
.thumb a:hover img { opacity: .5 ;transition-property: all;transition: 0.3s linear; }
*/

body.chld h1.abso { top: 10px ; left: calc( 25% + 40px ) ; z-index: 10 }

h1.shb {text-shadow:1px 1px 3px #000;}


/*********************************************************************** ヘッダー ******************************************************************************/

header#togglebox { height: 190px ; }
nav#org { margin: 0 1.5% 0 }
nav#org ul { position: absolute ; top: 0 ; right: 20px }
nav#org ul li { float: left ; display: inline-block ; text-align: center }
nav#org ul li { margin-left: 60px ; } 

nav#org ul li a { border-top: 0px solid #fff ; padding-top: 10px }
nav#org ul li a { color: #000 ; display: block ; margin-top: 0px }
nav#org ul li.hit a { border-top: 10px solid #000 ; padding-top: 0px }
nav#org ul li a:hover { border-top: 10px solid #dae4f5 ; padding-top: 0px }
nav#org ul li a span {  }

nav#org a span.eng { font-size: 1.3em ; line-height: 1.0em ; display: block ;padding-top: 20px } 
nav#org a span.jp { font-size: 0.8em ; line-height: 1.0em ; display: block ;padding-top: 10px }

.tt { font-size: 2.4em ; line-height: 1.1em ; top: 0px ; left: 16px ; }
.tt { text-align: left ; position: absolute ; width: 200px ; height:120px ; }
.tt a { display: block ; border-top: 0px solid #fff ; padding-top: 30px }
.tt a:hover { border-top: 10px solid #dae4f5 ; padding-top: 20px }

/*********************************************************************** フッター ******************************************************************************/

.sns { top: 0; right: 0 }
.facebook {  }


/*
.insta { position: absolute ; top: 0px ; right: 126px }
.insta#kajigakiao { right: 266px }
.insta img,
.facebook img { width: 24px ; height: auto ; vertical-align: middle ; padding-left: 8px }
.facebook a { color: #44609d }
*/

@media screen and (max-width: 940px) 
{
nav#org ul li { margin-left: 40px ; } 
}

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

}

/************************* info ***************************/

dl.toiawase { border-top : 1px solid #CCCCCC }
dl.toiawase dt ,dl.toiawase dd { float: left ; border-bottom : 1px solid #CCCCCC ; padding: 20px 0 ;margin: 0 0 0 0;height: 20px }
dl.toiawase dt.bikou ,dl.toiawase dd.bikou { height: 100px }
dl.toiawase dt.clear-box ,dl.toiawase dd.clear-box { float: none; clear: both ;width: 100%  }

dl.toiawase dt{ width: 25% }
dl.toiawase dd{ width: 74% }

dl.toiawase dd input.meru{ width: 60% !important; }
dl.toiawase dd input.nama{ width: 40% !important; }
dl.toiawase dd input.pos{ width: 30% !important; }
dl.toiawase dd input.add{ width: 80% !important; }
dl.toiawase dd textarea.you{ width: 90% !important; }
dl.toiawase dd textarea.you{ height: 100px !important; }


p.hearingpc { min-height: 65px }