@charset "UTF-8";

/* *******************************************************************
　　初期化
****************************************************************** */

* { margin: 0; padding: 0; box-sizing: border-box;}

html { height: 100%; font-size: 62.5%;}
html, body { height: 100%;}

body { font-family: sans-serif, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-size: 1.4rem; line-height: 1.8em; letter-spacing: 0.06em; color: #333; font-feature-settings: "palt"; position: relative;}

a:link { color: #1d2088; text-decoration: underline;}
a:visited { color: #816698;}
a:hover { color: #00479d;}
a:active { color: #1d2088;}

@media screen and (max-width: 767px) {
 body { font-size: 3.2vw;}
}


/* ブートストラップ最大幅 */
@media (min-width: 1200px) {
  .container { width: 1170px; position: relative;}
}

img.img-responsive { width: 100%; height: auto;}


/* テキスト */
h1 { font-size: 2.4rem; line-height: 1.6em; margin-bottom: 0;}
h2 { font-size: 4.0rem; font-weight: 200; line-height: 1.6em; text-align: center; padding-top: 1em; margin-bottom: 1.0em; position: relative;}
h2 span { font-size: 2.0rem; color: #6c6c6c; text-align: center; position: absolute; top: 0; margin: auto; left: 0; right: 0;}
h3 { font-size: 1.6rem; line-height: 1.6em; margin-bottom: 1.0em;}
h4 { font-size: 1.8rem; line-height: 1.6em; margin-bottom: 0;}
h5 { font-size: 1.6rem; line-height: 1.6em; margin-bottom: 0;}

p { font-size: 1.4rem; margin-bottom: 3em; line-height: 1.8em; text-align: justify;}

@media screen and (max-width: 767px) {
 h2 { font-size: 6.0vw;}
 h2 span { font-size: 3.0vw;}
 h3 { font-size: 3.0vw;}
 p { font-size: 3.2vw;}
}


/* ローディング */
.loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-image: url(../images/loader.svg); background-position: center; background-repeat: no-repeat; background-size: 60px 60px; background-color: #000;}

.pc_parts { display: block;}
.sp_parts { display: none;}

@media screen and (max-width: 767px) {
.pc_parts { display: none;}
.sp_parts { display: block;}
}


/* *******************************************************************
　　クリアランス
****************************************************************** */

/* pc版クリアランス */
.cl_pc120 { margin-bottom: 120px}
.cl_pc100 { margin-bottom: 100px;}
.cl_pc80 { margin-bottom: 80px;}
.cl_pc50 { margin-bottom: 50px;}
.cl_pc30 { margin-bottom: 30px;}

@media screen and (max-width: 767px) {
.cl_pc120 { margin-bottom: 60px;}
.cl_pc100 { margin-bottom: 50px;}
.cl_pc80 { margin-bottom: 40px;}
.cl_pc50 { margin-bottom: 25px;}
.cl_pc30 { margin-bottom: 15px;}
}

/* smp版クリアランス */
.cl_sm20 { margin-bottom: 10px;}
.cl_sm40 { margin-bottom: 20px;}

@media screen and (max-width: 767px) {
.cl_sm20 { margin-bottom: 20px;}	
.cl_sm40 { margin-bottom: 40px;}	
}

/* 固定クリアランス */
.cl_10 { margin-bottom: 10px;}
.cl_30 { margin-bottom: 30px;}


/* *******************************************************************
　　スマホ強制改行
****************************************************************** */

br.brlong { display: none; width: 0; height: 0; visibility: hidden; content: ""; font-size:0;}

@media screen and (max-width: 767px) {
br.brlong { display: block;}	
}



/* *******************************************************************
　　汎用パーツ
****************************************************************** */

/* 汎用ボタン */
a.btn_common { display: block; text-align: center; padding: 12px 4px; border-radius: 4px; background: #b55393;}
a.btn_common:link { color: #fff;}
a.btn_common:visited { color: #fff;}
a.btn_common:hover{ color: #fff; background: #b23587;}
a.btn_common:active { color: #fff;}

a.btn_common.commit { padding: 16px 4px; background: #c55f40;}
a.btn_common.commit:hover{ color: #fff; background: #ba4824;}

@media screen and (max-width: 767px) {
 a.btn_common { width: 90%; margin-left: auto; margin-right: auto;}
}

/* 汎用テーブルth縦 */
table.vertical_common { width: 100%; border-collapse: collapse;}
table.vertical_common th, table.vertical_common td { padding: 8px; border-top: 1px solid #d3d3d3;}
table.vertical_common th { width: 16%;}

table.vertical_common ol { list-style-type: decimal; margin-left: 1.6em;}
table.vertical_common ol li { margin-bottom: 0.6em;}

@media screen and (max-width: 767px) {
 table.vertical_common { border: none;}
 table.vertical_common th, table.vertical_common td { display: block; width: 100%; border: none;}
 table.vertical_common th { padding: 6px; text-align: center; background: #e5e5e5;}
 table.vertical_common td { padding-bottom: 16px;}
}


/* *******************************************************************
　　ヘッダーメニュー
****************************************************************** */

header { position: relative;}
header nav { width: 100%; height: 60px; background: rgba(0,0,0,0.6); position: absolute; left: 0; bottom: 0; z-index: 2;}
header nav ul { position: absolute; top: 18px; right: 0;}
header nav ul li { font-size: 1.2rem; margin-right: 16px; float: left; position: relative;}
header nav ul li:last-child { margin-right: 0;}
header nav ul li a { white-space: nowrap;}
header nav ul li a:link { padding-bottom: 4px; color: #fff; text-decoration: none;}
header nav ul li a:visited { color: #fff; text-decoration: none;}
header nav ul li a:hover { color: #fff;}
header nav ul li a:active { color: #fff;}

header nav ul li a span { display: block; transition: .5s}
header nav ul li a span:hover { border-bottom: 1px solid #888; transform: rotateX(360deg);}

header a.menu_logo { display: block; width: 120px; height: 30px; position: absolute; top: 15px;}

@media screen and (max-width: 767px) {
 header nav { width: 100%; height: 100%; border-radius: 0;  top: 0; left: 0; -webkit-transform: scale(.1); transform: scale(.1); background: rgba(0,0,0,0.0); z-index: 1; opacity: 0; -webkit-transition: 0.3s linear; transition: 0.3s linear;}
 
 header nav a.menu_logo { margin: 6em auto; left: 0; right: 0;}
header nav ul { width: 80%; margin: auto; top: 16em; position: absolute; left: 0; right: 0;}
header nav ul li { display: block; font-size: 4vw; padding: 0.5em; margin-right: 0; float: none; text-align: center; border: 1px solid #888; margin-bottom: 0.4em;}
}
/* hidden */
@media screen and (min-width: 768px) {
 .hidden-pc {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
 .hidden-sp {
    display: none !important;
  }
}

/* *******************************************************************
　　トグルボタン
****************************************************************** */

#navToggle { display: none;}



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

footer { height: 360px; padding-top: 3em; font-size: 1.2rem; background-image: url("../images/bg_footer.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top; position: relative;}

footer ul { display: block; text-align: center; margin: 0 auto;}
footer ul li { display: inline; text-align: center; margin: 0 6px;}
footer ul li a:link { color: #fff; text-decoration: none;}
footer ul li a:visited { color: #fff;}
footer ul li a:hover { color: #fff;}
footer ul li a:active { color: #fff;}

footer p.copyright { width: 100%; color: #fff; text-align: center; position: absolute; bottom: 1.0em;}

@media screen and (max-width: 767px) {
 footer ul { display: none;}
 footer { height: 200px;}
}

/* *******************************************************************
　　ページ先頭に戻るボタン
****************************************************************** */

#btnTop { display: table; width: 40px; height: 40px; background-color: rgba(181,83,147,0.8); text-align: center; color: #fff; position: fixed; bottom: -50px; right: 20px; z-index: 1; border-radius: 4px; -webkit-transition:1.0s ease-in-out; transition:1.0s ease-in-out;
}
a#btnTop:link { text-decoration: none !important;}
#btnTop i { display: table-cell; vertical-align: middle; font-size: 30px;}

#btnTop.disp { bottom: 20px; z-index: 6;}

@media screen and (max-width: 767px) {
	#btnTop { right: 15px;}
}


/* *******************************************************************
　　ビデオビジュアル 
****************************************************************** */

#video_wrapper { width:100%; padding-bottom: 56.25%; height:0px; position: relative; overflow: hidden;}
#video_wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

#video_wrapper h1 { font-size: 1.2rem; text-align: center; color: #fff; position: absolute; top: 4px; left: 0; right: 0;}
#video_wrapper h2 { display: block; width: 275px; height: 149px; margin: auto; position: absolute; top: 26%; left: 0; right: 0; z-index: 1;}
#video_wrapper a.noripan { display: block; width: 122px; height: 140px; margin: auto; position: absolute; top: 54%; left: 0; right: 0; z-index: 1}
#video_wrapper a.noripan img { width: 100%; height: 100%;}

@media screen and (max-width: 767px) {
 #video_wrapper { height: 100vh;}
 #video_wrapper video { height: 100%; width: auto !important;}
 #video_wrapper h1 { font-size: 1.0rem; width: 64%; margin-left: auto; margin-right: auto;}
	#video_wrapper h2 { width: 50%; height: auto;}
}

.rotate_y {
  animation: rotate_anime 4s linear; animation-iteration-count: 2;
}
@keyframes rotate_anime {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}


/* *******************************************************************
　　トップページ最新情報一覧 
****************************************************************** */

ul.top_news_list { width: 80%;}
ul.top_news_list li { padding: 8px; border: 1px solid #e5e5e5; margin-bottom: 20px;}
ul.top_news_list li:last-child { margin-bottom: 0;}

@media screen and (max-width: 767px) {
 ul.top_news_list { width: 100%;}
}

/* *******************************************************************
　　ボトムヘッダー（トップのvideo_wrapperを流用）
****************************************************************** */

#video_wrapper.botttom_header { width:100%; padding-bottom: 0; height: 300px; margin-bottom: 6em; background-image: url("../images/bg_footer.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

#video_wrapper.botttom_header h2 { display: block; width: 200px; height: 108px; margin: auto; position: absolute; top: 16%;}

@media screen and (max-width: 767px) {
 #video_wrapper.botttom_header { height: 240px; margin-bottom: 3em;}
 #video_wrapper.botttom_header h2 { top: 30%;}
}


/* *******************************************************************
　　下辺に傾斜の背景がついたラッパー
****************************************************************** */

.triangle_bg { background: #e5e5e5; position: relative;}
.triangle_bg:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 120px 0vw 0 100vw;
  border-color: #e5e5e5 transparent transparent transparent;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}

@media screen and (max-width: 767px) {
 .triangle_bg:after { border-width: 60px 0vw 0 100vw;}
}


/* *******************************************************************
　　経営理念
****************************************************************** */

#philosophy { min-height: 610px; padding-top: 6em; background-image: url("../images/img_fhilosophy.png"); background-repeat: no-repeat; background-position: right bottom;}

@media screen and (max-width: 767px) {
 #philosophy { padding-top: 3em; background-size: auto 40%; background-image: url("../images/img_fhilosophy_sp.png");}
}


/* *******************************************************************
　　会社概要
****************************************************************** */

#company { padding-top: 8em; background-image: url("../images/img_company.png"); background-repeat: no-repeat; background-position: left center;}

@media screen and (max-width: 991px) {
 #company { background-size: auto 60%;}
}
@media screen and (max-width: 767px) {
 #company { padding-top: 3em; background-size: auto 24%; background-image: url("../images/img_company_sp.png"); background-position: left 80%;}
}

iframe { filter: grayscale(100%); -webkit-transition: 1s ease-in-out; transition: 1s ease-in-out;}
iframe:hover { filter: grayscale(0%);}

/* *******************************************************************
　　投稿関係
****************************************************************** */

.eyecatchbox img { width:auto;
height:auto;
max-width:100%;
max-height:100%;
margin-bottom: 20px;}

/* 最新情報 */
ul.page_navi {
  margin: 0;
  padding: 0;
  font: 100% Verdana, Geneva, sans-serif;
  text-align: center;
}

ul.page_navi li {
  list-style: none;
  display: inline-block;
  margin: 0;
  padding: 0;
}

ul.page_navi li.current {
  padding: 5px 10px;
  border: 1px #7a846c solid;
  border-radius: 3px;
  color: #583C30;
  font-weight: normal;
}

ul.page_navi li a {
  text-decoration: none;
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #7a846c;
  border-radius: 3px;
}

ul.page_navi li a:hover {
  background-color: #eee;
}

.content_excerpt { padding-bottom: 20px; margin-bottom: 20px;}

.content_excerpt span.news { font-size: 14px; color: #FFF; text-align: center; padding: 4px 6px; margin-right: 5px; background: #b55393;}
.content_excerpt span.blog { font-size: 14px; color: #FFF; text-align: center; padding: 4px 6px; margin-right: 5px; background: #ff712b;}

.nextback { display: table; width: 40%; margin: 40px auto 0 auto;}
.nextback .back { display: table-cell; width: 33.333%; padding: 5px 10px; border: 1px #7a846c solid; border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-right: none; color: #583C30; font-weight: normal; text-align: center;}
.nextback .list { display: table-cell; width: 33.333%; padding: 5px 10px; border: 1px #7a846c solid; color: #583C30; font-weight: normal; text-align: center;}
.nextback .next { display: table-cell; width: 33.333%; padding: 5px 10px; border: 1px #7a846c solid; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-left: none; color: #583C30; font-weight: normal; text-align: center;}

@media screen and (max-width: 767px) {
.nextback { width: 100%;} 
}



/* *******************************************************************
　　お問い合わせフォーム
****************************************************************** */

/* お問い合わせ */
.wpcf7-text, .wpcf7-textarea { padding: 10px; border-radius: 6px; width: 100% !important; margin-top: 30px; margin-bottom: 10px; border: 1px solid #ccc; outline: none;}
.wpcf7c-btn-confirm, .wpcf7-submit, .wpcf7c-btn-back { border-radius: 6px; padding: 10px 30px; background-color: #b55393; color: #fff; border: none;}
input.wpcf7c-conf, textarea.wpcf7c-conf { border: 0; padding: 0; background: #fff;}

/* Contact Form 7 add confirmのスタイル上書き */
input.wpcf7c-conf, textarea.wpcf7c-conf { background-color: transparent !important; border: none !important;}
select.wpcf7c-conf { -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0; border: 0; margin: 0; padding: 0; background: none transparent; vertical-align: middle; font-size: inherit; color: inherit; box-sizing: content-box;}

.wpcf7 span.wpcf7-not-valid-tip { color: #ec4820 !important; font-size: 1.2rem !important;}
div.wpcf7-mail-sent-ok { background:#17a5d1; border: none !important; color:#fff; padding:20px !important;}
div.wpcf7-validation-errors, div.wpcf7-acceptance-missing { background:#ec4820; border: none !important; color:#fff; padding:20px !important;}



/* *******************************************************************
　　サイト実績に実装内容を追加
****************************************************************** */

.site_wrap { position: relative;} 
.site_description { display: table; width: 60%; height: 30%; padding: 6px; background: rgba(255, 255, 255, 0.8); margin: auto; box-shadow: 0 0 3px 2px rgba(0,0,0,0.2); position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 10; opacity: 0; -webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;}
.site_description.open { opacity: 1;}

.site_description p { font-size: 1.2rem; text-align: center; margin: 0; padding: 0;}

.site_wrap a:link { color: #333;}
.site_wrap a:visited { color: #333;}
.site_wrap a:hover { color: #333;}
.site_wrap a:active { color: #333;}