@charset "utf-8";

@import url(./basic.css);
@import url(./size.css);

a {color: #24140e;text-decoration: none;}
a:visited {color: #24140e;text-decoration: none;}
a:hover {color:#9fa09e;text-decoration: none;}

table {border-collapse: collapse;border-spacing: 0;}

/* mouseOver */
a:hover img {opacity:0.8;filter: alpha(opacity=80);ms-filter: "alpha( opacity=80 )";}

.wbasic {width: 1000px;margin:0 auto;}
.wbasic320 {width: 320px;margin:0 auto;}
.wbasic480 {width: 480px;margin:0 auto;}
.wbasic800 {width: 800px;margin:0 auto;}
.wbasic1200 {width: 1200px;margin:0 auto;}

.box_link{
padding:8px;
line-height:1.6rem;
/*margin-bottom:20px;*/
font-size:1.0rem;
text-align: center;
border:2px solid #1c1c1c;}
.box_link span.fs01{font-size:0.8rem;}
.box_link span.fs02{font-size:1.2rem;}
.box_link span.fc01{background-color:#dc6b9a;padding:4px 16px;color:#fff;font-weight:bold;}

.box_link_02{
padding:8px;
line-height:1.3rem;
/*margin-bottom:20px;*/
font-size:1.0rem;
text-align: center;
border:2px solid #1c1c1c;}
.box_link_02 span.fs01{font-size:0.8rem;}
.box_link_02 span.fs02{font-size:1.2rem;}
.box_link_02 span.fc01{background-color:#dc6b9a;padding:4px 16px;color:#fff;font-weight:bold;}

.bg_gray{background-color:#ede4e1;padding:60px;}
.bg_gray_pd40{background-color:#ede4e1;padding:40px;}

/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:94%;
    margin:0 auto;
}

.slider img {
    width:60vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
}

.slider .slick-slide {
  transform: scale(0.8);/*左右の画像のサイズを80%に*/
  transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
  opacity: 0.5;/*透過50%*/
}

.slider .slick-slide.slick-center{
  transform: scale(1);/*中央の画像のサイズだけ等倍に*/
  opacity: 1;/*透過なし*/
}


/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
  margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
  margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn{
display : block;
position: fixed;/*ボタン内側の基点となるためrelativeを指定*/
cursor: pointer;
right: 16px;
top   : 12px;
width: 42px;
height:42px;
z-index : 999;
text-align: center;}

/*ボタン内側*/
.openbtn span{
display: inline-block;
transition: all .4s;/*アニメーションの設定*/
position: absolute;
left: 6px;
height: 4px;
border-radius: 5px;
background: #25b7c0;
width:36px;
}
.openbtn span:nth-of-type(1) {top:10px;}
.openbtn span:nth-of-type(2) {top:20px;}
.openbtn span:nth-of-type(3) {top:30px;}
.openbtn span:nth-of-type(3)::after {
content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
position: absolute;
top:0px;
left:2px;
color:#25b7c0;
font-size: 0.6rem;
text-transform: uppercase;
font-weight: 600;
}
/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/
.openbtn.active span:nth-of-type(1) {
top: 14px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 30%;}
.openbtn.active span:nth-of-type(2) {opacity: 0;}
.openbtn.active span:nth-of-type(3){
top: 26px;
left: 18px;
transform: translateY(-6px) rotate(45deg);
width: 30%;}
.openbtn.active span:nth-of-type(3)::after {
content:"Close";/*3つ目の要素のafterにClose表示を指定*/
transform: translateY(0) rotate(-45deg);
top:2px;
left:4px;}
	
#g-nav{
/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
position:fixed;
z-index: 3;
/*ナビのスタート位置と形状*/
top:-120%;
left:0;
width:100%;
height: 100vh;/*ナビの高さ*/
background:#f7f6f5;
opacity: 0.9;
/*動き*/
transition: all 0.6s;}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{top: 0;}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
/*ナビの数が増えた場合縦スクロール*/
position: fixed;
z-index: 999; 
width: 100%;
height: 100vh;/*表示する高さ*/
overflow: auto;
-webkit-overflow-scrolling: touch;}

/*ナビゲーション*/
#g-nav ul {
/*ナビゲーション天地中央揃え*/
display: block;
position: absolute;
z-index:3;
top:50%;
left:50%;
transform: translate(-50%,-50%);}
/*リストのレイアウト設定*/
#g-nav li{
float: none;
list-style: none;
text-align: center; }
#g-nav li a{
color:#25b7c0;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.16em;
font-size:1.4rem;
font-weight: bold;}

/* main */
main{}
article {}

@media screen and (max-width: 767px) { /* forSMP */
.wbasic,.wbasic800,.wbasic1200{width:100%;padding: 0 16px;}
.wbasic320{width:100%;}
.wbasic480{width:100%;}
.bg_gray{padding:40px;}}
strong {
}
.pBas {
	font-size:1.0rem;
	margin-bottom: 40px;
}
.pBas_b0 {
	font-size:1.0rem;
	margin-bottom: 0px;
}
.pBas_b10 {
	font-size:1.0rem;
	margin-bottom: 10px;
}
.pBas_b20 {
	font-size:1.0rem;
	margin-bottom: 20px;
}
.pBas_grey{
	color:#666c67;
	font-size:80%;
line-height:24px;
	text-align: center;
	margin-bottom: 40px;	
}
.h1 {
font-size: 3.0rem;
	line-height:4.8rem;
padding:1.0em;
text-align: center;
margin-bottom: 60px;
border-bottom:1px solid #ede4e1;
}
.h2 {
position: relative;
padding:20px 0;
font-size:2.0rem;
line-height: 2.8rem;
font-weight:bold;
}
.h2 span{font-size:1.0rem;}
.h3 {
position: relative;/*相対位置*/
padding:0.4em;/*アイコン分のスペース*/
margin-bottom:20px;
font-size:1.6rem;
line-height: 2.4rem;
border-top: 2px solid #1c1c1c;
border-bottom: 2px solid #1c1c1c;
}
/*.h3:before{ font-family: FontAwesome;/*忘れずに*/
/*content: "\f105";/*アイコンのユニコード*/
/*position: absolute;/*絶対位置*/
/*font-size:1.4em;/*サイズ*/
/*left: 0.4em;/*アイコンの位置*/
/*top: 0.5em;/*アイコンの位置*/
/*color: #25b7c0;/*アイコン色*/
/*}*/
.h3 span{
font-size:20px;	
}
.h3top {
position: relative;/*相対位置*/
padding:0.8em 0em 0.4em 2.8em;/*アイコン分のスペース*/
margin-bottom:0px;
color: #4e454a;
font-size:1.6em;
border-top:2px solid #f5b2ac;
}
.h3top:before{ font-family: FontAwesome;/*忘れずに*/
content: "\f815";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size:1.4em;/*サイズ*/
left: 0.4em;/*アイコンの位置*/
top: 0.6em;/*アイコンの位置*/
color: #c70067;/*アイコン色*/
}
.h4{
  position: relative;
  padding: 1.2rem 2.4rem;
  border: 4px solid #f5b2ac;
margin-bottom:30px;
font-size:1.4em;
color: #4e454a;
}
.h4:before,
.h4:after {
  position: absolute;
  left: 0;
  width: 100%;
  content: '';
  border-top: 4px dotted #f5b2ac;
}
.h4:before {
  top: 6px;
}
.h4:after {
  bottom: 6px;
}
.h4 span{
color: #f5b2ac;	
}
.h5 {
  padding: 0.2em 0.4em;
  border-bottom:1px dotted #25b7c0;
  margin-bottom: 6px;
  font-size:1.2em;
line-height: 1.6em;
color: #25b7c0;
}
.h5 span{color:#222;font-size:0.8em;}
.h5no {
  padding: 0.2em 0.4em;
  margin-bottom: 10px;
  font-size:1.2em;
color: #4e454a;
}
.h5no span {
font-size:1.4em;
color:#f5b2ac;
}
.h5no a{
color: #4e454a;
}
.h6 {
position: relative;/*相対位置*/
font-size:1.0em;
color:#4e454a;
padding: 0.4em 2.0em;
border-bottom: 1px solid #4e454a;
margin-bottom: 20px;
}
.h6:before{ font-family: FontAwesome;/*忘れずに*/
content: "\f138";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size:1.2em;/*サイズ*/
left: 0.2em;/*アイコンの位置*/
top: 0.3em;/*アイコンの位置*/
color: #00afcc; /*アイコン色*/
}

@media screen and (max-width:767px) { /* forSMP */
.h1 {font-size: 1.8rem;line-height:2.8rem;}
.h2 {font-size: 1.6rem;line-height:2.6rem;}
.h3 {font-size: 1.3rem;line-height:2.2rem;}
}
/*========= ページトップのためのCSS ===============*/

/*スクロールリンクの形状*/
.scroll-top {
  /*表示位置*/
  position: fixed;
  right: 20px;
  bottom: 10px;
  z-index: 2;
  /*はじめは非表示*/
  opacity: 0;
  visibility: hidden; 
  transition: opacity .5s, visibility .5s; /*それぞれに0.5秒の変化のアニメーション*/
  /*縦書き*/
  -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
  /*改行禁止*/
    white-space: nowrap;
  /*矢印の動き*/
  animation: arrowmove 1s ease-in-out infinite;
}

@keyframes arrowmove{
      0%{bottom:20px;}
      50%{bottom:25px;}
     100%{bottom:20px;}
 }


/*.scroll-viewクラスがついたら出現*/
.scroll-top.scroll-view {
  opacity: 1;
  visibility: visible;
}

/*リンク全体の aタグの形状*/
.scroll-top a {
  text-decoration: none;
  color: #666;
  text-transform: uppercase;
  font-size:0.9rem;
    display: block;
}

/*スクロールリンクの形状*/

.js-scroll a::after{
  content:"";
  position: absolute;
  top:0;
  right:0;
  width:1px;
  height: 50px;
  background:#666;
}

.js-scroll a::before {
    content: "";
    position: absolute;
    top: 30px;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #666;
    transform: skewX(-31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-scroll a::before{
  right:-11px;
}

/*ページトップリンクの形状*/

.js-pagetop a::after{
  content:"";
  position: absolute;
  top:0;
  right:0;
  width:1px;
  height: 50px;
  background:#666;
}

.js-pagetop a::before {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #666;
    transform: skewX(31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-pagetop a::before{
  right:0;
}

/* crear */
.clearfix {
	overflow:hidden;
	zoom: 1;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0px;
	clear: both;
	visibility: hidden;
}