@charset "utf-8";


/* [CSS RESET]==============================================*/
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,lo,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td{
margin:0;
padding:0;
border:0;
outline:0;
vertical-align:baseline;
background:transparent;
}

/* ---------- font ---------- */
body{
/* 	
font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
*/
	
/* 
font-family:Shin Maru Go Regular , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
*/
	
font-family: "Noto Sans JP", sans-serif;
    
/* -- #slideRの配置用　横からhover メニュー https://gimmicklog.com/jquery/203/  -- */    
position: relative;
}

/* ---------- スクロールバー有無によるズレ対策 ---------- */	
html {
overflow-y: scroll;
}
/* ---------- ページ内スクロール　スムーズにする ---------- */	
html {
scroll-behavior: smooth;
}



/* ---------- float clear ---------- */	 
.clear {
     clear:both;
	 }	



/* link
------------------------------------------------------------*/
a{
color: #444444;
text-decoration:none;
}
a:hover{
color: #999999;
text-decoration:none;
}

a.a_orange{
color: #c74d0c;
text-decoration:none;
}
a.a_orange:hover{
color: #333333;
text-decoration:none;
}

a.a_blue{
color: #00529f;
text-decoration:none;
}
a.a_blue:hover{
color: #999999;
text-decoration:none;
}

a.a_red{
color: #ff000;
text-decoration:none;
}
a.a_red:hover{
color: #999999;
text-decoration:none;
}

a.a_blue_underline{
color: #00529f;
text-decoration:underline;
}
a.a_blue_underline:hover{
color: #999999;
text-decoration:underline;
}

a.a_red_underline{
color: #ff0000;
text-decoration:underline;
}
a.a_red_underline:hover{
color: #999999;
text-decoration:underline;
}

a.a_black_underline{
color: #000000;
text-decoration:underline;
}
a.a_black_underline:hover{
color: #999999;
text-decoration:underline;
}


/* tel リンクをスマホのみ有効
------------------------------------------------------------*/
@media (min-width: 751px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}

/* tel リンクをPCでも有効
------------------------------------------------------------*/
.a_tel_event {
pointer-events: auto!important;
cursor: pointer!important;
}


/* br 改行　sp pc 振り分け
------------------------------------------------------------*/
@media screen and (max-width: 680px){   
  .br_pc { display:none; }
  .br_sp { display:block; }
}
@media screen and (min-width: 680px){   
  .br_pc { display:block; }
  .br_sp { display:none; }
}
/* br 改行　sp pc 振り分け 599px
------------------------------------------------------------*/
@media screen and (max-width: 599px){   
  .br_pc_02 { display:none; }
  .br_sp_02 { display:block; }
}
@media screen and (min-width: 599px){   
  .br_pc_02 { display:block; }
  .br_sp_02 { display:none; }
}






/* list
------------------------------------------------------------*/
ul, ol {
    list-style: none;
}



/* none
------------------------------------------------------------*/
.sp-none {
    display: inherit;
    }
.sp-none_02 {
    }
.sp-none_03 {
	display: inline;
    }
.pc-none {
    display: none!important;
}
.tab-visible {
    display: none;
}
.sp-visible {
    display: none;
}
.pc-visible {
    display: inherit;
}
.toggle_none_visible {
    display: none;
    }
.gnavi_none_visible {
    display: inherit;
    }
.logo_sp-visible {
    display: none;
}
@media screen and (max-width: 1000px) {
    .tab-none {
        display: none;
    }
    .tab-visible {
        display: inherit;
    }
    .sp-visible {
        display: none;
    } 
    .pc-visible {
        display: none!important;
    }
.logo_sp-visible {
    display: inherit;
}
.toggle_none_visible {
    display: inherit;
    }
.gnavi_none_visible {
    display: none;
    }
}
@media screen and (max-width: 970px) {
    .pc-none {
        display: none;
    }
    .sp-none {
    display: inherit;
    }
}
@media screen and (max-width: 599px) {
    .sp-none {
        display: none!important;
    }
    .sp-none_02 {
        display: none;
    }
    .sp-none_03 {
        display: none;
    }
.pc-none {
    display: inherit!important;
}
    .sp-visible {
        display: inherit;
    }    
    .pc-visible {
        display: none;
    }
    .tab-visible {
        display: none;
    }
}



/* ---------- #img_opacity ---------- */	
/* 画像透過リンク */	
a:hover img.img_opacity {
        opacity: 0.8;
        filter: alpha(opacity=80);
        -moz-opacity:0.80;
        }
		
/* 新旧Firefox */
a:hover img.img_opacity, x:-moz-any-link { background: #fff;}
a:hover img.img_opacity, x:-moz-any-link, x:default { background: #fff;}

/* ---------- #img_index_bnr_gn ---------- */	
img.img_index_bnr_gn {
	padding:0px 0 0px 0;
	margin:0px;
	}

/* 画像透過リンク */	
a:hover img.img_index_bnr_gn {
        opacity: 0.8;
        filter: alpha(opacity=80);
        -moz-opacity:0.80;
        }
		
/* 新旧Firefox */
a:hover img.img_index_bnr_gn, x:-moz-any-link { background: #fff;}
a:hover img.img_index_bnr_gn, x:-moz-any-link, x:default { background: #fff;}

/* ---------- #img_opacity_slider ---------- */	
/* 画像透過リンク */	
.slick-slider a:hover img {
        opacity: 0.8;
        filter: alpha(opacity=80);
        -moz-opacity:0.80;
        }

/* ---------- #img_opacity_slider ---------- */	
/* 画像_反転 */	
.img_reverse {
    transform: scale(-1, 1);
    filter: FlipH;
    -ms-filter: "FlipH";
}


/* [body]===================================================*/
body {
	padding:0;
	margin:0;
    font-size:12px;
    line-height:1.1;
	color:#444444;
    }

/* float
------------------------------------------------------------*/
.float_left {
    float: left!important;
}
.float_right {
    float: right!important;
}


/* position
------------------------------------------------------------*/
.position_relative {
    position: relative;
}

/* padding
------------------------------------------------------------*/
.padding-0 {
	padding: 0 !important;
}
.padding_left_5 {
	padding-left: 5px !important;
}
.padding_top-0 {
	padding-top: 0!important;
}
.padding_top-20 {
	padding-top: 20px!important;
}
.padding_bottom-0 {
	padding-bottom: 0!important;
}

/* box-shadow
------------------------------------------------------------*/
.box-shadow_999 {
	box-shadow: 0px 0px 15px 0px rgba(153, 153, 153, 0.35);
	border-radius: 10px;
}

/* border
------------------------------------------------------------*/
.border_1px {
	border: 1px solid #bbb;
	box-sizing: border-box;
}
.border_bottom_1px {
	border-bottom: 1px solid #bbb;
	box-sizing: border-box;
}
.border_bottom_none {
	border-bottom: none;
}

/* p
------------------------------------------------------------*/
.h1_01 {
	padding:50px 0 20px 0px;
	letter-spacing:0.2em;
	font-size:34px;
	font-weight:bolder;
	text-align: center;
	color: #000000;
	}
.h2_01 {
	padding:0 0 1em 1em;
	font-size:18px;
	font-weight:bolder;
	color: #000000;
	}

.p_001 {
    font-size: 16px;
	padding:0 0 .5em 1em;
    line-height: 1.5em;
}
.p_016 {
    line-height:2.2em!important;
	padding:0em!important;
    color: #ffffff!important;
	letter-spacing: .2em;
	font-weight: bold;
    -ms-writing-mode: tb-rl;            /* IE用　*/
    -webkit-writing-mode: vertical-rl;  /* chrome用　*/
    -o-writing-mode: vertical-rl;       /* opera用　*/
	writing-mode: vertical-rl;
	text-shadow: #000 1px 0 10px;
}

.p_center {
	text-align: center!important;
}	
.p_center_sp {
	text-align: start;
}
.p_black {
	color:#000!important;
}	
.p_black_sp {
}
.p_666 {
	color:#666!important;
}
.p_888 {
	color:#888!important;
}
.p_999 {
	color:#999!important;
}
.p_aaa {
	color:#aaa!important;
}
.p_red {
	color:#FF0000!important;
}
.p_pink {
	color:#df2b84!important;
}
.p_green {
	color:#5f836d!important;
}
.p_blue {
	color: #346fba!important;
}
.p_white {
	color: #ffffff!important;
}
.p_orange {
	color:#c74d0c!important;
}

.p_bold {
	font-weight: bold!important;
}
.p_right {
	text-align: right!important;
}
.p_left {
	text-align: left!important;
}
.p_90 {
	font-size: 90%!important;
}
.p_120 {
	font-size:120%!important;
}
.p_underline {
	text-decoration: underline!important;
}
.p_line-through {
	text-decoration:line-through!important;
}
.p_line-through_red {
    color: #f00!important;
    text-decoration : line-through!important;
 }
.p_70-percent {
	font-size: 70%!important;
}
.p_80-percent {
	font-size: 80%!important;
}
.p_90-percent {
	font-size: 90%!important;
}
.p_kaigyou {
   display: inline-block;
}


.p_mincyo {
    font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}	
.p_gothic {
    font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}
.p_weight-normal {
	font-weight: normal;
}

.p_pad_1em_sp-non {
	padding-top: 1em;
}

@media screen and (max-width: 599px) {
.h1_01 {
	padding:20px 0 10px 0px;
	letter-spacing:0.2em;
	font-size:20px;
	}
.p_center_sp {
	text-align: center!important;
}
.p_004 {
	font-size:14px;
}
.p_016 {
	font-size: 20px!important;
}
}
@media screen and (max-width: 799px) {
.p_black_sp {
	color:#000!important;
}
}
@media screen and (min-width: 600px) {
.h1_01 {
	padding:30px 0 10px 0px;
	letter-spacing:0.2em;
	font-size:25px;
	}
.p_004 {
	font-size:16px;
}
.p_016 {
	font-size:20px!important;
}
}
@media screen and (min-width: 800px) {
.h1_01 {
	padding:30px 0 10px 0px;
	letter-spacing:0.2em;
	font-size:30px;
	}
.p_004 {
	font-size:18px;
}
.p_016 {
	font-size:24px!important;
}
}
@media screen and (min-width: 1100px) {
.h1_01 {
	padding:50px 0 20px 0px;
	letter-spacing:0.2em;
	font-size:32px;
	}
.p_004 {
	font-size:20px;
}
.p_016 {
	font-size:28px!important;
}
}
@media screen and (min-width: 1400px) {
.p_004 {
	font-size:24px;
}
.p_016 {
	font-size:36px!important;
}
}

/* hr
------------------------------------------------------------*/
.hr01 {
    height: 1px;
    background-color: #bbb;
    border: none;
    color: #bbb;
	margin: 0;
}
.hr02 {
    height: 1px;
    background-color: #bbb;
    border: none;
    color: #bbb;
	margin: 0;
}
.hr {
    height: 2px;
    width: 80%;
   }	
.hr_ddd {
   border: 0.5px dashed #ddd;
   }

@media screen and (max-width: 599px) {
.hr02 {
	margin: 20px 0 20px;
}
}
@media screen and (min-width: 600px) {
.hr02 {
	margin: 50px 0 10px;
}
}
@media screen and (min-width: 1100px) {
.hr02 {
	margin: 50px 0 10px;
}
}


/* z-index
------------------------------------------------------------*/
.z_index_3 { z-index: 3; }
.z_index_4 { z-index: 4; }
.z_index_5 { z-index: 5; }


/* flex_order
------------------------------------------------------------*/
.flex_order_01 { order: 1; }
.flex_order_02 { order: 2; }
.flex_order_03 { order: 3; }
    
    

/* img
------------------------------------------------------------*/
.img_gray {
-webkit-filter: grayscale(100%) brightness(50%);
-moz-filter: grayscale(100%) brightness(50%);
-ms-filter: grayscale(100%) brightness(50%);
-o-filter: grayscale(100%) brightness(50%);
filter: grayscale(100%) brightness(50%);
}

/* 画像下の謎の余白消し */
.img_no_space_bottom {
    vertical-align: bottom;
    display: block;
    margin: 0 auto;
}

.img_width_30 {
    width: 30%;
    margin: auto;
    display: block;
}
.img_width_40 {
    width: 40%;
    margin: auto;
    display: block;
}
.img_width_50 {
    width: 50%;
    margin: auto;
    display: block;
}
.img_width_60 {
    width: 60%;
    margin: auto;
    display: block;
}
.img_width_70 {
    width: 70%;
    margin: auto;
    display: block;
}
.img_width_80 {
    width: 80%;
    margin: auto;
    display: block;
}
.img_width_90 {
    width: 90%;
    margin: auto;
    display: block;
}
.img_width_100 {
    width: 100%;
	height: auto;
}
.img_width_60_sp {
}
.img_width_75_sp {
}
.img_width_80_sp {
}
.img_width_90_sp {
}
.img_width_95_sp {
}
.img_width_100_sp {
}
.img_border_grey {
    border: 1px #eeeeee solid;
}

@media screen and (max-width: 599px) {
.img_width_60_sp {
    width: 60%!important;
}
.img_width_75_sp {
    width: 75%!important;
}
.img_width_80_sp {
    width: 80%!important;
}
.img_width_90_sp {
    width: 90%!important;
}
.img_width_95_sp {
    width: 95%!important;
}
.img_width_100_sp {
    width: 100%!important;
}
}
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 800px) {	
.img_logo {
   }	 
}
@media screen and (min-width: 1100px) {   
}
@media screen and (min-width: 1400px) {
}



/* bg_img print対応　print.css参照させる
------------------------------------------------------------*/
img.nodisplay{
  display:none;
}




/* ナビゲーションドロップダウンのためのCSS https://coco-factory.jp/ugokuweb/move01/5-1-1/ 
------------------------------------------------------------*/

/*==ナビゲーション全体の設定*/
nav{
  color:#000;
  text-align: center;
  padding-top: 18px;
}
/*ナビゲーションを横並びに*/
nav ul{
  list-style: none;
  display: flex;
  justify-content: center;
}
/*2階層目以降は横並びにしない*/
nav ul ul{
  display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li{
  position: relative;
}

/*ナビゲーションのリンク設定*/
nav ul li a{
  display: block;
  text-decoration: none;
  color: #000;
  padding:20px 2em;
  transition:all .3s;
}

nav ul li li a{
  padding:10px 3em;
}

nav ul li a:hover{
  color:#000; 
}

/*==矢印の設定*/

/*2階層目を持つliの矢印の設定*/
/*
nav ul li.has-child::before{
  content:'';
  position: absolute;
  left:15px;
  top:25px;
  width:6px;
  height:6px;
  border-top: 2px solid #999;
    border-right:2px solid #999;
    transform: rotate(135deg);
}
*/

/*3階層目を持つliの矢印の設定*/
nav ul ul li.has-child::before{
  content:'';
  position: absolute;
  left:6px;
  top:17px;
  width:6px;
  height:6px;
    border-top: 2px solid #fff;
    border-right:2px solid #fff;
    transform: rotate(45deg);
}

/*== 2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
nav li.has-child ul{
    /*絶対配置で位置を指定*/
  position: absolute;
  left:0;
  top:44px;
  z-index: 4;
    /*形状を指定*/
  background:#555;
  width:180px;
    /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
    /*アニメーション設定*/
  transition: all .3s;
}

/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a{
  color: #fff;
  border-bottom:solid .5px rgba(255,255,255,0.7);
}

nav li.has-child ul li:last-child a{
  border-bottom:none;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active{
  background:#000;
}


/*==3階層目*/

/*3階層目の位置*/
nav li.has-child ul ul{
  top:0;
  left:182px;
  background:#66ADF5;
}

nav li.has-child ul ul li a:hover,
nav li.has-child ul ul li a:active{
  background:#448ED3;
}



@media screen and (max-width: 599px) {
}
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 1000px) {
}
@media screen and (min-width: 1100px) {
}


/*==768px以下の形状*/

@media screen and (max-width:1000px){
  nav{
    padding: 0;
  }
  
  nav ul{
    display: block;
  }
  
  nav li.has-child ul,
  nav li.has-child ul ul{
    position: relative;
  left:0;
  top:0;
  width:100%;
  visibility:visible;/*JSで制御するため一旦表示*/
  opacity:1;/*JSで制御するため一旦表示*/
  display: none;/*JSのslidetoggleで表示させるため非表示に*/
  transition:none;/*JSで制御するためCSSのアニメーションを切る*/
}
  
nav ul li a{
  border-bottom:none;
}

/*矢印の位置と向き*/

nav ul li.has-child::before{
  left:20px;  
}

nav ul ul li.has-child::before{
    transform: rotate(135deg);
  left:20px;
}
    
nav ul li.has-child.active::before{
    transform: rotate(-45deg);
}

}


/*==================================================
　5-3-9 テキストが入れ替わる　　https://coco-factory.jp/ugokuweb/move01/5-3-9/
===================================*/
.gnavi_001 li a{
    /*テキストの基点とするためrelativeを指定*/
  position: relative;
    /*はみ出る要素を隠す*/
  overflow: hidden;
  padding:10px 60px;
}

.gnavi_001 li span{
    /*絶対配置でテキストの位置を決める*/
  position: absolute;
  left: 50%;
  top:0;
    /*アニメーションの指定*/
  transition: all .5s;
  transform: translate(-50%, 0);/*X方向に-50% ※中央寄せにするため*/
  /*ブロック要素にして透過なし、テキスト折り返しなし*/  
  display: block;
  opacity:1;
  white-space: nowrap;
}

/*差し替わるテキストの設定*/
.gnavi_001 li span:nth-child(2){
  opacity:0;/*透過0に*/
    transform: translate(-50%,-100%);/*X方向に-50% Y方向に100%*/
}

/*hoverするとテキストが入れ替わる設定*/
.gnavi_001 li:hover span:nth-child(1){
  opacity:0;/*透過0に*/
    transform: translate(-50%,100%);/*X方向に-50% Y方向に-100%*/
}

.gnavi_001 li:hover span:nth-child(2){
  opacity:1;/*不透明に*/
  transform: translate(-50%, 0);/*X方向に-50% Y方向に0*/
}
/*========= レイアウトのためのCSS ===============*/

.lead{
  padding: 50px 20px;
}

/*gnavi font-size*/
.gnavi_001 li span{
}
.gnavi_001 li span:nth-child(2){
}
@media screen and (min-width: 1px) {
}
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 1000px) {
.gnavi_001 li a{
  padding:10px 45px;
}
.gnavi_001 li a:last-child{
  padding:10px 60px;
}
.gnavi_001 li span{
	font-size: 16px;
	font-weight: 100;
}
.gnavi_001 li span:nth-child(2){
	font-size: 13px;
	top: .25em;
	font-weight: 300;
}
}
@media screen and (min-width: 1100px) {
.gnavi_001 li a{
  padding:10px 60px;
}
.gnavi_001 li span{
	font-size: 16px;
	font-weight: 100;
}
.gnavi_001 li span:nth-child(2){
	font-size: 13px;
	top: .25em;
	font-weight: 300;
}
}




/*========= レイアウトのためのCSS ===============*/

h1{
  font-size:2rem;
  text-align: center;
  padding: 20px;
}

h2{
  font-size:1.2rem;
  text-align: center;
  margin: 0 0 30px 0;
}

p{
  margin-top:20px;  
}

small{
  background:#333;
  color:#fff;
  display: block;
  text-align: center;
  padding:20px;
}


section{
  padding:0;
}

section:nth-child(2n){
  background:#fbfbfb; 
}



/* sp ハンバーガー 上 帯
------------------------------------------------------------*/	
.sp_header_bar {
    background-color: #558e36;
    max-height: 40px;
}


/* sp ハンバーガー navi drawer-nav
------------------------------------------------------------*/	
.img_logo_side {
    width: 50px;
    margin: 0 0 0 0px;
}
.drawer-brand {
    line-height: 2rem!important;
	padding: 10px 2em 0;
}
.drawer-nav {
    position: fixed;
    z-index: 101!important;
    top: 0;
    overflow: hidden;
    width: 16.25rem;
    height: 100%;
    color: #222;
    background-color: #f7f2eb;
	padding-top: 10px;
	font-size: 14px;
}
.drawer-menu {
    list-style: none;
	margin-left: 0px;
	text-align: left;
}
.drawer-menu li {
    padding: 4px 0 4px 10px;
    border-top: 1px solid #dddddd;
}
.drawer-menu a {
	text-decoration: none;
	color:#333;
}
.drawer-menu a:hover {
	text-decoration: none;
	color:#e50012;
}
.drawer-dropdown-menu li {
	font-size: 0.9rem!important;
}
.drawer-dropdown-menu-item {
    line-height: 2.5rem!important;
}

.drawer-hamburger {
    top: -3px;
}
.img_icon_left {
	vertical-align: text-top;
	padding-right: .5em;
}
@media screen and (max-width: 999px) {
.drawer-hamburger {
    top: 2px;
}
}
@media screen and (max-width: 599px) {
.drawer-hamburger {
    top: 0px;
}
}



/* 横からhover メニュー https://gimmicklog.com/jquery/203/
　 上下中央配置　https://ak-design.work/css%E3%81%AEfixed%E3%81%AE%E4%B8%8A%E4%B8%8B%E4%B8%AD%E5%A4%AE%E6%8F%83%E3%81%88
------------------------------------------------------------*/
#sns_r {
	z-index: 99;
	position: fixed;
	right: 10px;
	width: 35px;
	color: #fff;
	font-size: 14px;
    height: 70px;
    top:calc(45%);
}
.sns_icon {
    padding-bottom: .7em;
	width: 35px;
}
.sns_icon:last-child {
    padding-bottom: 0em;
}


@media screen and (max-width: 599px) {
#sns_r {
	width: 25px;
}
.sns_icon {
	width: 25px;
}
}
@media screen and (min-width: 600px) {
#sns_r {
	width: 30px;
}
.sns_icon {
	width: 30px;
}
}
@media screen and (min-width: 830px) {
#sns_r {
	width: 32px;
}
.sns_icon {
	width: 32px;
}
}
@media screen and (min-width: 1400px) {
#sns_r {
	width: 32px;
    top:calc(50% - 283.714px/2);
    top:calc(50% - 350.714px/2);
    top:calc(50% - 395.964px/2);
}
.sns_icon {
    padding-bottom: 1em;
	width: 32px;
}
}


/* button アニメーション　https://www.nxworld.net/tips/css-ghost-button-good-chemistry-hover-effect.html
------------------------------------------------------------*/
.button {
  display: inline-block;
  padding: 1em 0 .8em;
  border: 1px solid #dad6ca;
  color: #999;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .3s;
    width: 100%;
}
.button:hover {
  background-color: rgba(201,186,177,.3);
  border-radius: 30px;
}
.button_02 {
  display: inline-block;
  padding: .4em 0 .3em;
  border: 1px solid #dad6ca;
  color: #333333;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .3s;
  border-radius: 5px;
    background-color: #f6cd5e;
    width: 12em;
}
.button_02:hover {
  background-color: rgba(251,244,226,1);
  border-radius: 30px;
  color: #c74d0c;
}
@media screen and (max-width: 599px) {
}



/* bg_color
------------------------------------------------------------*/
.bg_color_blue {
	background-color: #0051a0!important;
}
.bg_color_pink {
	background-color: #e5cbc2!important;
}
.bg_color_yellow {
	background-color: #fef9d0!important;
}
.bg_color_white {
	background-color: #ffffff!important;
}
.bg_color_grey {
	background-color: #eeeeee!important;
}
.bg_color_light_grey {
	background-color: #fbfbfb!important;
}
	
/* #wrapper
------------------------------------------------------------*/
.wrapper {
	width: 1160px;
	margin: auto;
}


/* .header
------------------------------------------------------------*/
.header_wrapper {
	width: 1000px;
	margin: auto;
	position: relative;
}
.header_logo_en_wrapper {
    margin-left: 1em;
    width: 30%;
    float: left;
}
.header_logo_en_wrapper_02 {
    margin-left: 1em;
    width: 43%;
    float: left;
}
.header_logo_gnavi_wrapper {
    width: 30%;
	position: absolute;
	top: 0;
	right: 100px;
}
.header_logo_sns_wrapper {
	position: absolute;
	top: 3px;
	right: 10px;
	
    display: flex;
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
    margin:1.8em 0 0px 0;
    list-style: none;
	justify-content: space-around;
	width: 100px;
}
.img_header_logo_sns {
	width: 22px;
	height: auto;
}
.img_header_logo_sns_sp {
	width: 22px;
	height: auto;
	position: absolute;
	top: 14px;
}
.p_header_logo_sns_sp {
	padding-left: 2.3em;
}

@media screen and (min-width: 1px) {
.header_wrapper {
	width: 100%;
}
.header_logo_en_wrapper {
    width: 50px;
    padding: .4em 0 0;
}
.header_logo_en_wrapper_02 {
    width: 74.4px;
    padding: .4em 0 0;
}
.header_logo_gnavi_wrapper {
    width: 40%;
    padding: .3em 0;
}
}
@media screen and (min-width: 600px) {
.header_logo_en_wrapper {
    width: 70px;
    padding: .6em 0 .2em 2em;
}
.header_logo_en_wrapper_02 {
    width: 100px;
    padding: .6em 0 .2em 2em;
}
.header_logo_gnavi_wrapper {
    width: 500px;
    padding: .5em 0;
}
}
@media screen and (min-width: 1000px) {
.header_logo_en_wrapper {
    width: 70px;
}
.header_logo_en_wrapper_02 {
    width: 100px;
}
.header_logo_gnavi_wrapper {
    width: auto;
}
}
@media screen and (min-width: 1300px) {
.header_wrapper {
	width: 1300px;
}
}
/* .header .img
------------------------------------------------------------*/
.img_logo {
    width: 30%;
    padding: .5em 0 0 0;
}
.img_logo_en {
    width: 30%;
    padding: 0em 0 0 0;
}

@media screen and (min-width: 1px) {
.img_logo {
    width: 100%;
}
}
@media screen and (min-width: 600px) {
.img_logo {
    width: 100%;
}
}
@media screen and (min-width: 1000px) {
.img_logo {
}
}
@media screen and (min-width: 1300px) {
.img_logo {
}
}


/*==================================================
共通　横並びのための設定　　https://coco-factory.jp/ugokuweb/move01/5-3-9/
===================================*/

.gnavi{
    display: flex;
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
    margin:1.8em 0 0px 0;
    list-style: none;
	justify-content: flex-end;
}

.gnavi li a{
    display: block;
    text-decoration: none;
    color: #fff;
}

.gnavi li{
    margin-bottom:0px;
}

/*==================================================
　5-3-9 テキストが入れ替わる
===================================*/


.gnavi li a{
    /*テキストの基点とするためrelativeを指定*/
  position: relative;
    /*はみ出る要素を隠す*/
  overflow: hidden;
  padding:10px 60px;
}

.gnavi li span{
    /*絶対配置でテキストの位置を決める*/
  position: absolute;
  left: 50%;
  top:0;
    /*アニメーションの指定*/
  transition: all .5s;
  transform: translate(-50%, 0);/*X方向に-50% ※中央寄せにするため*/
  /*ブロック要素にして透過なし、テキスト折り返しなし*/  
  display: block;
  opacity:1;
  white-space: nowrap;
}

/*差し替わるテキストの設定*/
.gnavi li span:nth-child(2){
  opacity:0;/*透過0に*/
    transform: translate(-50%,100%);/*X方向に-50% Y方向に100%*/
}

/*hoverするとテキストが入れ替わる設定*/
.gnavi li:hover span:nth-child(1){
  opacity:0;/*透過0に*/
    transform: translate(-50%,-100%);/*X方向に-50% Y方向に-100%*/
}

.gnavi li:hover span:nth-child(2){
  opacity:1;/*不透明に*/
  transform: translate(-50%, 0);/*X方向に-50% Y方向に0*/
}
/*========= レイアウトのためのCSS ===============*/

.lead{
  padding: 50px 20px;
}

/*gnavi font-size*/
.gnavi li span{
}
.gnavi li span:nth-child(2){
}
@media screen and (min-width: 1px) {
}
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 1000px) {
.gnavi li span{
	font-size: 16px;
	font-weight: 100;
}
.gnavi li span:nth-child(2){
	font-size: 13px;
	top: .25em;
	font-weight: 300;
}
}
@media screen and (min-width: 1300px) {
.gnavi li span{
	font-size: 16px;
	font-weight: 100;
}
.gnavi li span:nth-child(2){
	font-size: 13px;
	top: .25em;
	font-weight: 300;
}
}




/*  トップの動き　https://webdesignday.jp/inspiration/technique/css/4166/
------------------------------------------------------------*/	
.site-header{
    background: #fff;
    position: fixed;
    top: 0;
	left: 0;
    transition: .5s;
    width: 100%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
    z-index: 10;
}
.site-header.hide{
    top: -63px;
}
@media screen and (min-width: 1px) {
.site-header.hide{
    top: -9.541%;
}
}
@media screen and (min-width: 600px) {
.site-header.hide{
    top: -73.25px;
}
}
@media screen and (min-width: 1000px) {
.site-header.hide{
    top: -72.25px;
}
}
@media screen and (min-width: 1300px) {
.site-header.hide{
    top: -72.25px;
}
}

/*  トップの動き　hero header_wrapperの高さ分下げる
------------------------------------------------------------*/	
#wrapper_hero {
}
@media screen and (min-width: 1px) {
#wrapper_hero {
    padding-top: 49px!important;
}
}
@media screen and (min-width: 600px) {
#wrapper_hero {
    padding-top: 70px!important;
}
}
@media screen and (min-width: 1000px) {
#wrapper_hero {
    padding-top: 68.25px!important;
}
}
@media screen and (min-width: 1300px) {
#wrapper_hero {
    padding-top: 68.25px!important;
}
}

/* slider gnavi 重なり
------------------------------------------------------------*/
#wrapper_hero {
    position: relative;
}
#wrapper_slider {
    z-index: 2;
    position: relative;
}
.wrapper_hero {
    position: relative;
}
.wrapper_slider {
    z-index: 2;
    position: relative;
}
.top_img_position_01 {
    width: 100%;
    padding-top: 35.875%; /* Aspect Ratio */
}
.top_img_position_products {
    width: 100%;
    padding-top: 48.648648648%; /* Aspect Ratio */
    margin: auto;
}
.top_img_position_products_detail {
    width: 100%;
    height: auto;
    margin: auto;
}
.top_img_position_event_detail {
    width: 100%;
    height: auto;
    margin: auto;
}
#wrapper_footer {
    z-index: 4;
    position: relative;
}
@media screen and (max-width: 600px) {
.top_img_position_products_detail {
    width: 75%;
}
}
@media screen and (min-width: 900px) {  
.top_img_position_products {
    width: 900px;
    height: 438px;
    padding: 0;
}
.top_img_position_products_detail {
    width: 900px;
    padding: 0;
}
}
@media screen and (min-width: 1400px) {
.top_img_position_products_detail {
    width: 1080px;
}
}



/* slider カスタマイズ
------------------------------------------------------------*/
/* 画像送り btn */
.sp-button {
    width: 8px!important;
    height: 8px!important;
    border: 1px solid #999!important;
}
.sp-selected-button {
    background-color: #999!important;
}
/* 画像送り btn スペース */
.sp-buttons {
    padding-top: 3px!important;
}
/* arrow btn 位置 */
.sp-previous-arrow {
    left: 50px!important;
}
.sp-next-arrow {
    right: 50px!important;
}


/* slider カスタマイズ btn
------------------------------------------------------------*/	
.btn_201908_container {
  text-align: center;
  padding: .4em 0 .2em;
}
.btn-open {
  display: inline-block;
  width: 12em;
  height:3em;
  text-align: center;
  background-color: #000000;
  font-size: 16px;
  line-height: 3em;
  color: #FFF!important;
  text-decoration: none;
  font-weight: bold;
  border: 2px solid #000000;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.btn-open:after{
  width: 100%;
  height: 0;
  content:"";
  position: absolute;
  top: 50%;
  left: 50%;
  background : #FFF;
  opacity: 0;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transition: .2s;
  z-index: -1;
}
.btn-open:hover{
  color: #000000!important;
  text-decoration: none!important;
}
.btn-open:hover:after{
  height: 280%;
  opacity: 1;
}
.btn-open:active:after{
  height: 340%;
  opacity: 1;
}

@media screen and (max-width: 599px) {
.btn_201908_container {
}
.btn-open {
  font-size: 13px;
}
}
@media screen and (min-width: 600px) {
.btn-open {
  font-size: 15px;
}
}
@media screen and (min-width: 830px) {
.btn-open {
  font-size: 16px;
}
}
@media screen and (min-width: 1400px) {
.btn-open {
  font-size: 20px;
}
}

	

/* .wrapper_gnavi
------------------------------------------------------------*/
.wrapper_bg_light_orange {
    width: 100%;
    background-color: #faf4e4;
}
#wrapper_gnavi {
    width: auto;
	float: right;
    padding-top: .2em;
}
.ul_gnavi_menu {
    display: flex;
    justify-content: space-between;
}
.li_gnavi_menu {
    list-style-type: none;
}
.p_gnavi_menu {
    font-size: 18px;
	padding:0 0 .8em 0;
    line-height: 1.5em;
    color: #c74d0c;
    font-weight: bold;
}
@media screen and (min-width: 1400px) {
#wrapper_gnavi {
}
}


/* .contents
------------------------------------------------------------*/
.contents_01 {
    width: 70%;
    max-width: 700px;
    margin: auto;
    padding-top: 1.5em;
}
.contents_01_inner {
    width: 100%;
    padding-top: 0em;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-self: center;
}
.contents_01_inner_img {
    width: 28%;
    align-self: center;
    margin: auto;
}
.contents_01_inner_text {
    width: 70%;
    align-self: center;
}
.contents_01_inner_img_02 {
    width: 38%;
    align-self: center;
    margin: auto;
}
.contents_01_inner_text_02 {
    width: 60%;
    align-self: center;
}
.contents_01_img_right {
    padding: 2em 0 1em 1em;
    float: right;
}
.contents_02 {
    width: 80%;
    max-width: 700px;
    margin: auto;
    padding: 3em 0;
}
.contents_001 {
    width: 90%;
    margin: 5em auto 5em;
}
.contents_002 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.contents_002_inner {
    padding: 1.5em 0 2em;
}
.contents_002_inner_02 {
    padding: 1.5em 0 1.5em;
}
.contents_002_inner_03 {
    padding: 1.5em 0 2em;
}
.contents_03 {
    width: 60%;
    max-width: 600px;
    margin: auto;
    padding-top: 1.5em;
}
.contents_04 {
    width: 70%;
    max-width: 700px;
    margin: auto;
    padding: 1em 0 .5em;
}
.contents_05 {
    width: 100%;
    padding-top: 0em;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-self: center;
}
.contents_05_inner {
    width: 28%;
    align-self: center;
    margin: auto;
}
.contents_05_inner_02 {
    width: 22%;
    align-self: center;
    margin: auto;
}
.contents_05_inner_03 {
    width: 22%;
    align-self: center;
    margin: auto;
}
.contents_05_inner_04 {
    width: 15%;
    align-self: center;
    margin: auto;
}
.flex_order_1-2 { 
}
.flex_order_2-1 {
}
.bg_color_light_green {
    background-color: #f8fdfa;
}


@media screen and (max-width: 599px) {
.contents_01 {
    width: 90%;
}
.contents_04 {
    width: 90%;
}
.contents_01_inner_img {
    width: 40%;
}
.contents_01_inner_img_sp_50 {
    width: 50%!important;
}
.contents_01_inner_img_sp_60 {
    width: 60%!important;
}
.contents_01_inner_img_sp_70 {
    width: 70%!important;
}
.contents_01_inner_text {
    width: 100%;
}
.contents_01_inner_img_02 {
    width: 40%;
}
.contents_01_inner_text_02 {
    width: 100%;
}
.contents_002_inner {
    width: 46%;
}
.contents_002_inner_02 {
    width: 98%;
    margin: auto;
}
.contents_002_inner_03 {
    width: 46%;
}
.contents_03 {
    width: 80%;
}
.flex_order_1-2 { 
    order: 2;
}
.flex_order_2-1 {
    order: 1;
}
}
@media screen and (min-width: 600px) {
.contents_002_inner {
    width: 46%;
}
.contents_002_inner_02 {
    width: 47.2%;
}
.contents_002_inner_03 {
    width: 46%;
}
.contents_05_inner_02 {
    width: 12%;
    align-self: center;
    margin: auto;
}
.flex_order_1-2 { 
    order: 1;
}
.flex_order_2-1 {
    order: 2;
}
}
@media screen and (min-width: 900px) {
.contents_002::before{
    width: 21%;
  content:"";
  display: block;
  order:1;
}
.contents_002::after{
    width: 21%;
  content:"";
  display: block;
}
.contents_002_inner {
    width: 21%;
}
.contents_002_inner_03 {
    width: 30%;
    padding: 1.5em 0 3em;
}
}
@media screen and (min-width: 1100px) {
.contents_001 {
    width: 1000px;
}
.contents_002_inner {
    width: 21%;
}
.contents_002_inner_02 {
    width: 47.2%;
}
}
@media screen and (min-width: 1400px) {
.contents_01 {
    max-width: 840px;
}
.contents_03 {
    max-width: 740px;
}
}



/* index about
------------------------------------------------------------*/
.img_about_wrapper {
	margin: auto;
}
@media screen and (max-width: 599px) {
.img_about_wrapper {
	width: 90%;
}
}
@media screen and (min-width: 600px) {
.img_about_wrapper {
	width: 80%;
}
}
@media screen and (min-width: 700px) {
.img_about_wrapper {
	width: 70%;
}
}
@media screen and (min-width: 800px) {
.img_about_wrapper {
	width: 60%;
}
}
@media screen and (min-width: 900px) {
.img_about_wrapper {
	width: 55%;
}
}


/* news 新着情報
------------------------------------------------------------*/

/* news topics
------------------------------------------------------------*/	
.topics_has {
    font-size: 16px;
    width: 80%;
    margin: 1.5em auto;
    border-top: 1px dashed #ccc;
}
.topics_has dl {
    padding: 1em 0 .8em;
    border-bottom: 1px dashed #ccc;
    line-height: 1.5em;
}
.topics_has dl a {
    display: block;
}
.topics_has dl:hover{
    background-color: #f3f3f3;
}
.topics_has dl:first-child {
}
.topics_has dt {
    color: #633b14;
}

.dt_topics_has {
    background-color:#548235;
    border-radius:5px;
    color:#fff;
    margin:0 1em;
    padding:5px 1em;
    text-decoration:none;
    font-size: 90%;
    width:8em;
    text-align: center;
    display: block;
}

.dl_nocolor dl:hover{
    background-color: white;
}




div.div_topics_has_date_inner {
    padding: 0;
    border: none;
}
dl.dl_topics_has_date_inner {
    padding: 0;
    border: none;
    line-height: 1.5em
}
dt.dt_topics_has_date_inner {
    color: #633b14;
    clear: left;
    float: left;
    width: 2.5em!important;
}
dd.dd_topics_has_date_inner {
    display: block;
    text-align: center;
    color: #633b14;
    margin-right: .8em;
    font-size: 98%;
    max-width: 9em;
    margin-left: 2.5em!important;
}


div.div_topics_ehas_inner {
    padding: 0;
    border: none;
}
dl.dl_topics_has_inner {
    padding: 0;
    border: none;
    line-height: 1.5em;
    position: relative;
}
dt.dt_topics_has_inner {
    color: #633b14;
    clear: left;
    float: left;
    width: 5.2em!important;
    width: 9em!important;
}
dd.dd_topics_has_inner {
    background-color:rgba(255,255,255,1);
    border-radius:5px;
	border: .5px solid #bbb;
    display: block;
    text-align: center;
    color: #548f31;
    margin-right: .8em;
    font-size: 70%;
    max-width: 8em;
    margin-left: 8.4em!important;
    margin-left: 12.4em!important;
}
.dd_topics_has_inner_sp_new {
    font-size: 100%;
    max-width: 4em;
}


.dd_topics_has_inner_category {
    line-height: 1.15em;
    padding: .5em 4em .2em;
    max-width: 14em;
}
.p_new_sp_none {
    color: #5f836d!important;
}
.p_new_space_sp_none {
    padding: 0 1.3em;
}
.p_new_pc_none {
    color: #5f836d!important;
}


@media screen and (max-width: 899px) {
.topics_has {
    font-size: 14px;
}
.topics_has dt {
    clear: both;
}
div.div_topics_has_inner {
    padding: .5em 0 .7em;
}
    
dt.dt_topics_has_inner {
    width: 5.2em!important;
}
dd.dd_topics_has_inner {
    margin-left: 8.4em!important;
}
.dd_topics_has_inner_sp_new {
    margin-left: 0em!important;
    position: absolute;
    top: 0;
    left: 18em;
}
    
.p_new_sp_none {
    display: none!important;
}
.p_new_space_sp_none {
    display: none;
}
.p_new_pc_none {
    display: block;
}
}

@media screen and (min-width: 900px) {
.topics_has {
    width: 84%;
}
.topics_has dt {
    clear: left;
    float: left;
    width: 18em;
}
.topics_has dd {
    margin-left: 13.2em;
}
.p_new_pc_none {
    display: none!important;
}
}

@media screen and (min-width: 900px) {
.topics_has {
    width: 840px;
    font-size: 16px;
}
}@media screen and (min-width: 1400px) {
.topics_has {
    width: 1000px;
    font-size: 16px;
}
}




.p_topics_has_left {
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    font-size: 16px;
    line-height: 1.9;
    height: 15em;
    text-align: center;
  position: absolute;
  top: 50%; /*親要素を起点に上から50%*/
  left: 0;  /*親要素を起点に左から50%*/
  -webkit-transform: translateY(-50%) translateX(0%);
  transform: translateY(-50%) translateX(0%); /*要素の大きさの半分ずつを戻す*/
    color: #444444;
    z-index: 5;
}
.p_topics_has_right {
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    font-size: 16px;
    line-height: 2.2;
    height: 15em;
    text-align: center;
    color: #444444;
  position: absolute;
  top: 50%; /*親要素を起点に上から50%*/
  right: 0;  /*親要素を起点に左から50%*/
  -webkit-transform: translateY(-50%) translateX(0%);
  transform: translateY(-50%) translateX(0%); /*要素の大きさの半分ずつを戻す*/
}
.p_topics_has_left_text_sp {
    display: none;
}
@media screen and (max-width: 600px) {
.p_topics_has_left_text_sp {
  position: absolute;
  top: 50%; /*親要素を起点に上から50%*/
  left: -18%;  /*親要素を起点に左から5%*/
    display: block;
}
}
@media screen and (min-width: 1400px) {
.p_topics_has_left {
    font-size: 20px;
}
}




/* .products https://photoshopvip.net/88174
------------------------------------------------------------*/
figure.snip1194 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #ffffff;
  color: #000000;
  text-align: center;
    margin-block-start: 0em;/* 画像の位置調整カスタマイズ */	
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
figure.snip1194 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
figure.snip1194 img {
  opacity: 1;
  width: 100%;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
    vertical-align: bottom;/* 画像下のスペース削除対策 */	
}
figure.snip1194 figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


figure.snip1194 .p_plus,
figure.snip1194 .p_view {
  margin: 0;
  position: absolute;
  width: 100%;
  left: 0;
  opacity: 0;
}
figure.snip1194 .p_plus {
  padding: 0 30px;
  display: inline-block;
  font-weight: 400;
  text-transform: uppercase;
  bottom: 50%;
  -webkit-transform: translate3d(0%, -100%, 0);
  transform: translate3d(0%, -100%, 0);
  font-size: 3em;
}
figure.snip1194 .p_plus span {
  font-weight: 400;
}
figure.snip1194 .p_view {
  top: 50%;
  padding: 0 10px;
  font-size: 1.5em;
  font-weight: 500;
  -webkit-transform: translate3d(0%, 100%, 0);
  transform: translate3d(0%, 100%, 0);
}


figure.snip1194 h2,
figure.snip1194 p {
  margin: 0;
  position: absolute;
  width: 100%;
  left: 0;
  opacity: 0;
}
figure.snip1194 h2 {
  padding: 0 30px;
  display: inline-block;
  font-weight: 400;
  text-transform: uppercase;
  bottom: 50%;
  -webkit-transform: translate3d(0%, -100%, 0);
  transform: translate3d(0%, -100%, 0);
	line-height: 1.2em;
	font-size: 1.8em;
}
figure.snip1194 h2 span {
  font-weight: 400;
}
figure.snip1194 p {
  top: 50%;
  padding: 1em 50px 0;
  font-size: 1.2em;
  font-weight: 500;
  -webkit-transform: translate3d(0%, 100%, 0);
  transform: translate3d(0%, 100%, 0);
	line-height: 1.5em;
}
figure.snip1194 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
}
figure.snip1194:hover img,
figure.snip1194.hover img {
  opacity: 0.6;
}
figure.snip1194:hover figcaption h2,
figure.snip1194.hover figcaption h2,
figure.snip1194:hover figcaption p,
figure.snip1194.hover figcaption p {
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
}
figure.snip1194:hover figcaption h2,
figure.snip1194.hover figcaption h2 {
  opacity: 0.9;
}
figure.snip1194:hover figcaption p,
figure.snip1194.hover figcaption p {
  opacity: 0.6;
}


figure.snip1194:hover figcaption .p_plus,
figure.snip1194.hover figcaption .p_plus,
figure.snip1194:hover figcaption .p_view,
figure.snip1194.hover figcaption .p_view {
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
}
figure.snip1194:hover figcaption .p_plus,
figure.snip1194.hover figcaption .p_plus {
  opacity: 0.9;
}
figure.snip1194:hover figcaption .p_view,
figure.snip1194.hover figcaption .p_view {
  opacity: 0.6;
}
@media screen and (max-width: 599px) {
figure.snip1194 .p_plus {
  font-size: 1em;
}
figure.snip1194 .p_view {
  font-size: .5em;
}
}
@media screen and (max-width: 799px) {
figure.snip1194 .p_plus {
  font-size: 1.5em;
}
figure.snip1194 .p_view {
  font-size: 1em;
}
}
@media screen and (min-width: 800px) {
figure.snip1194 .p_plus {
  font-size: 2em;
}
figure.snip1194 .p_view {
  font-size: 1.5em;
}
}



/* .products
------------------------------------------------------------*/
.img_products_001 {
    border: 1px solid rgb(218, 214, 202);
	position: relative;
}
.p_products_001 {
    font-size: 16px;
    line-height: 1.5em;
    color: #333;
    padding: .8em 0 .6em;
	margin: 0;
}
.p_products_002 {
    font-size: 14px;
    line-height: 1.5em;
    color: #888;
	margin: 0;
}
.products_name {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .5em 1em .2em;
    background: #fff;
    background-color: rgba(238,238,238,0.8);
	border: 1px solid rgb(238, 238, 238,0);
    line-height: 1.1;
	color: #333;
	z-index: 99;
}

@media screen and (max-width: 599px) {
.p_products_001 {
    font-size: 13px;
}
.p_products_002 {
    font-size: 12px;
}
.products_name {
	font-size: 11px;
}
}
@media screen and (min-width: 600px) {
.products_name {
	font-size: 12px;
}
}
@media screen and (min-width: 799px) {
.products_name {
	font-size: 13px;
}
}


/* products topics
------------------------------------------------------------*/	
.topics_products {
    font-size: 110%;
    width: 100%;
    margin: 1.5em auto 2.5em;
    border-top: 1px solid #ccc;
}
.topics_products dl {
    padding: .5em 0;
    border-bottom: 1px solid #ccc;
    line-height: 1.5em
}
.topics_products dl a {
    display: block;
}
.topics_products dl:hover{
    background-color: #f3f3f3;
}
.topics_products dl:first-child {
}
.topics_products dt {
    color: #5f836d;
}
.dl_nocolor dl:hover{
    background-color: white;
}

@media screen and (max-width: 767px) {
.topics_products {
    font-size: 100%;
}
}
@media screen and (min-width: 800px) {
.topics_products dt {
    clear: left;
    float: left;
    width: 7em;
}
.topics_products dd {
    margin-left: 7.2em;
}
}




/* .contents_lunminous
------------------------------------------------------------*/
.contents_base_wrapper_01 {
    margin: auto;
    display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
    width: 94%;
    padding-top: 1em;
    padding-bottom: 3em;
}
.contents_base_wrapper_01_inner_left {
    width: 48%;
}
.contents_base_wrapper_01_inner_right {
    width: 48%;
}
.contents_base_block_reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.align_self_center {
    align-self: center;
}
.contents_base_wrapper_03 {
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 94%;
    padding-top: 1em;
    padding-bottom: 3em;
}
.contents_base_wrapper_03::after{
  content:"";
  display: block;
  width:32%;
}
.contents_lunminous {
    width: 32%;
    padding-top: 1em;
}
.img_products_luminous {
    width: 100%;
    height: auto;
    margin: auto;
	cursor: zoom-in;
}

@media screen and (max-width: 599px) {
.contents_base_wrapper_01 {
    width: 80%;
}
.contents_base_wrapper_01_inner_left {
    width: 100%;
}
.contents_base_wrapper_01_inner_right {
    width: 100%;
}
.contents_base_wrapper_03:first-child {
	padding-top: 0;
    padding-bottom: 0;
}
}
@media screen and (min-width: 600px) {    
}
@media screen and (min-width: 800px) {
.contents_base_wrapper_03:after{
    content:"";
    display:block;
    width: 32%;
    height:0;
}
}
@media screen and (min-width: 1000px) {
.contents_base_wrapper_03 {
    padding-bottom: 5em;
}
}






/* column
------------------------------------------------------------*/	
.p_column_001 {
    color: #333333;
    font-size: 20px;
    line-height: 2;
    padding-bottom: 1em;
	margin: 0;
	font-weight: bold;
}
.p_column_002 {
	padding: 0 0 .2em 0;
    width: 800px; 
    color: #333333; 
    font-size: 30px; 
    margin: auto; 
    line-height: 1.8;
}
.p_column_003 {
    width: 600px; 
    color: #333333; 
    font-size: 20px; 
    margin: auto; 
    line-height: 1.8; 
    padding-bottom: 0em;
	text-align: center;
}
@media screen and (max-width: 599px) {
.p_column_001 {
    font-size: 15px;
	text-align: center;
	padding-top: 1em
}
.p_column_002 {
    font-size: 19px;
    width: 80%;  
}
.p_column_003 {
    font-size: 16px;
    width: 80%; 
}
}
@media screen and (min-width: 600px) {
.p_column_001 {
    font-size: 16px; 
}
.p_column_002 {
    font-size: 20px; 
    width: 80%;
}
.p_column_003 {
    font-size: 18px; 
    width: 80%; 
}
}
@media screen and (min-width: 800px) {
.p_column_001 {
    font-size: 18px; 
}
.p_column_002 {
    width: 800px;
}
.p_column_003 {
    width: 600px; 
}
}
@media screen and (min-width: 1000px) {
.p_column_002 {
    font-size: 22px; 
}
}
@media screen and (min-width: 1200px) {
.p_column_002 {
    font-size: 26px; 
}
}
@media screen and (min-width: 1400px) {
.p_column_002 {
    font-size: 28px; 
}
.p_column_003 {
    font-size: 22px;
}
}



/* flow_design https://find-a.jp/seotimes/11-flow-designs/
------------------------------------------------------------*/	
.flow_design09 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flow09 {
  padding-left: 0;
  border-bottom: solid 1px #E1E8ED;
}

.flow09 > li {
  list-style-type: none;
  display: flex;
  padding: 20px 0;
  border-top: solid 1px #E1E8ED;
}

.flow09 > li dl dt {
  font-size: 1.2em;
  line-height: 2;
  font-weight: bold;
  margin-bottom: 10px;
}

.flow09 > li .icon09 {
  line-height: 1.08;
  font-size: 2em;
  font-weight: bold;
  color: #999;
  text-align: center;
  width: 70px;
  position: relative;
  margin-top: 0;
}

.flow09 > li .icon09::before {
  content: 'STEP';
  font-size: 0.3em;
  display: block;
  margin-bottom: 3px;
  letter-spacing: 1px;
}

.flow09 > li .icon09::after {
  content: "";
  display: block;
  width: 1px;
  height: calc(100% - 40px);
  background-color: #858585;
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  margin: auto;
}

.flow09 > li dl dd {
  margin: 0;
}

.flow09 > li dl {
  width: calc(100% - 70px);
  margin-top: 0.8em;
}

.p_reform_002 {
    color: #333333;
    font-size: 20px;
    line-height: 2;
    padding-bottom: 1.5em;
	margin: 0;
}
    

@media screen and (max-width: 599px) {
.flow09 > li .icon09 {
  font-size: 2em;
}

.flow09 > li .icon09::before {
  font-size: 0.3em;
}
	
.p_reform_002 {
    font-size: 15px;
}
}
@media screen and (min-width: 600px) {
.flow09 > li .icon09 {
  font-size: 2.5em;
}

.flow09 > li .icon09::before {
  font-size: 0.3em;
}
	
.p_reform_002 {
    font-size: 16px; 
}
}
@media screen and (min-width: 800px) {
.flow09 > li .icon09 {
  font-size: 3em;
}

.flow09 > li .icon09::before {
  font-size: 0.3em;
}
	
.p_reform_002 {
    font-size: 18px; 
}
}



/* list
------------------------------------------------------------*/
.ul_001 {
    list-style-type: disc;
    padding-left: 1em;
	font-size: 100%;
}
.ul_001 li {
	color: #444;
}
.ul_002 {
    list-style-type: none;
}
.ul_002 li {
    padding-left: 1em;
    text-indent: -1em;
}
.ul_003 li{
    position: relative;
    list-style: none;
    line-height: 1.5;
    padding-left: 1em;
}
.ul_003 li::before{
    content: "＊";
    display: block;
    position: absolute;
    left: -.2em;
    top: 0;
}
.ul_004 {
    list-style-type: disc;
    padding-left: 1em;
    line-height: 1.5;
	width: 90%;
	margin: auto;
}
.ul_004 li {
	color: #444;
	padding: .5em 0;
}
.ul_005 {
    list-style-type: decimal;
	font-size: 100%;
	padding-left: 2em;
}
.ul_005 li {
	color: #444;
	padding: .3em 0 0 0;
}
@media screen and (max-width: 599px) {
.ul_004 {
	font-size:12px;
}
}
@media screen and (min-width: 600px) {
.ul_004 {
	font-size:14px;
}
}
@media screen and (min-width: 800px) {
}
@media screen and (min-width: 1000px) {
}
@media screen and (min-width: 1400px) {
.ul_004 {
	font-size:16px;
}
}



/* list_services
https://saruwakakun.com/html-css/reference/ul-ol-li-design
https://fontawesome.com/how-to-use/on-the-web/styling/icons-in-a-list
------------------------------------------------------------*/
.list_services {
  box-shadow :0px 0px 3px silver;
  border: solid 1px whitesmoke;
  background: #ffffff;
  border-radius :1em;
}
.list_services ul {
    margin: auto;
    width: 14em;
    padding: 1.5em 0 1.1em;
}

.list_services ul li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}
@media screen and (max-width: 599px) {
.list_services ul {
	font-size:12px;
}
}
@media screen and (min-width: 600px) {
.list_services ul {
	font-size:14px;
}
}
@media screen and (min-width: 800px) {
}
@media screen and (min-width: 1000px) {
}
@media screen and (min-width: 1400px) {
.list_services ul {
	font-size:16px;
}
}



/* title　参考：https://pote-chil.com/html-maker/heading
------------------------------------------------------------*/
.heading-028 {
    color: #999999;
    font-weight: 400;
    font-size: .75rem;
    letter-spacing: .04em;
    text-align: center;
	padding-bottom: 2em;
}
.heading-028::before {
    color: #888888;
    display: block;
    font-weight: 700;
    font-size: 1.65rem;
    line-height: 1.5;
    letter-spacing: .02em;
    content: attr(data-label);
}
.heading-028_002 {
    color: #666666;
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: .04em;
    text-align: center;
	padding-bottom: 2em;
}
.heading-028_002::after {
    color: #666666;
    display: block;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 2;
    letter-spacing: .02em;
    content: attr(data-label);
}
@media screen and (max-width: 599px) {
.heading-028 {
	padding-bottom: 1em;
}
.heading-028::before {
    font-size: 1.2rem;
}
.heading-028_002 {
    font-size: 1rem;
	padding-bottom: 1em;
}
.heading-028_002::after {
    font-size: .8rem;
}
}
@media screen and (min-width: 600px) {
.heading-028 {
	padding-bottom: 2em;
}
.heading-028::before {
    font-size: 1.65rem;
}
.heading-028_002 {
    font-size: 1.3rem;
	padding-bottom: 2em;
}
.heading-028_002::after {
    font-size: 1rem;
}
}
@media screen and (min-width: 800px) {
.heading-028_002 {
    font-size: 1.5rem;
}
.heading-028_002::after {
    font-size: 1.1rem;
}
}
@media screen and (min-width: 1000px) {
}
@media screen and (min-width: 1400px) {
}



/* index_p
------------------------------------------------------------*/
.p_001 {
    line-height:1.8em;
	padding:.5em 0 .5em;
	margin-top: 0;
}
.p_002 {
    line-height:2.2em;
	padding:1em 1em .5em;
}
.p_003 {
    line-height:1.8em;
	padding:0em 1em 0;
	font-weight: bold;
}
.p_004 {
    line-height:1.8em;
	padding:.5em 0 .5em;
	margin-top: 0;
	color: #777!important;
}
.p_004_letter_spacing {
	letter-spacing:-5px;
}
.p_005 {
    line-height:1.5em;
	padding:1em 0em .5em;
	margin-top: 0;
}

@media screen and (max-width: 599px) {
.p_001 {
	font-size:14px;
}
.p_002 {
	font-size:12px;
}
.p_003 {
	font-size:12px;
	padding-left: 12px;
}
.p_004 {
	font-size:12px;
}
.p_005 {
	font-size:12px;
}
}
@media screen and (min-width: 600px) {
.p_001 {
	font-size:16px;
}
.p_002 {
	font-size:14px;
}
.p_003 {
	font-size:14px;
	padding-left: 14px;
}
.p_004 {
	font-size:12px;
}
.p_005 {
	font-size:14px;
}
}
@media screen and (min-width: 800px) {
}
@media screen and (min-width: 1000px) {
}
@media screen and (min-width: 1400px) {
.p_001 {
	font-size:16px;
}
.p_002 {
	font-size:16px;
}
.p_003 {
	font-size:16px;
	padding-left: 16px;
}
.p_004 {
	font-size:12px;
}
.p_005 {
	font-size:16px;
}
}



/* .p_topics_ahven_left
------------------------------------------------------------*/
.p_topics_ahven_left {
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    font-size: 10px;
    line-height: 1.9;
    height:auto;
    text-align: center;
  position: fixed;
  top: 50%; /*親要素を起点に上から50%*/
  top: calc(50% + .5em);
  left: 0;  /*親要素を起点に左から50%*/
  -webkit-transform: translateY(-50%) translateX(0%);
  transform: translateY(-50%) translateX(0%); /*要素の大きさの半分ずつを戻す*/
    color: #bbbbbb;
	opacity: 50%;
    z-index: 5;
}
.p_topics_ahven_right {
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    font-size: 16px;
    line-height: 2.2;
    height: 15em;
    text-align: center;
    color: #444444;
  position: absolute;
  top: 50%; /*親要素を起点に上から50%*/
  right: 0;  /*親要素を起点に左から50%*/
  -webkit-transform: translateY(-50%) translateX(0%);
  transform: translateY(-50%) translateX(0%); /*要素の大きさの半分ずつを戻す*/
}
.p_topics_ahven_left_text_sp {
    display: none;
}
@media screen and (max-width: 600px) {
.p_topics_ahven_left_text_sp {
  position: absolute;
  top: 50%; /*親要素を起点に上から50%*/
  left: -18%;  /*親要素を起点に左から5%*/
    display: block;
}
}
@media screen and (min-width: 1400px) {
.p_topics_ahven_left {
    font-size: 12px;
}
}







/* fadein アニメーション
------------------------------------------------------------*/
/* 画面外にいる状態 */
.fadein {
    opacity : 0;
    transform : translate(0, 30px);
    transition : all 500ms;
    }

/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }




/* fadein アニメーション_全体 https://littlethings.jp/blog/web/css-effect-scroll
------------------------------------------------------------*/
.effect-fade {
    opacity : 0;
    transform : translate(0, 45px);
    transition : all 500ms;
}

.effect-fade.effect-scroll {
    opacity : 1;
    transform : translate(0, 0);
}



/* footer 固定　https://proengineer.internous.co.jp/content/columnfeature/6491#2
------------------------------------------------------------*/

#wrapper_footer  {
position: fixed; /* フッターを固定する */
bottom: 0; /* 上部から配置の基準位置を決める */
left: 0; /* 左から配置の基準位置を決める */
width: 100%; /* フッターの横幅を指定する */
height: 60px; /* フッターの高さを指定する */
padding:5px 0; /* フッター内側の余白を指定する(上下左右) */
color: #000000; /* フッターのフォントの色を指定する */
background-color: rgba(255,255,255,0.8); /* フッターの背景色を指定する */
}
.footer_logo_en {
    padding:7px 0 0 10px;
    width: 300px;
    height: auto;
}
.footer_logo_jp {
    float: right;
    padding: 8px 20px 0 0;
    width: 180px;
    height: auto;
}
.footer_logo_jp_02 {
    float: right;
    margin: 6px 60px 0 0;
    width: 210px;
    height: auto;
}
.footer_inner {
    width: 100%;
    height: auto;
    max-width: 1000px;
    margin: auto;
}


@media screen and (max-width: 599px) {
#wrapper_footer  {
    height: 40px; /* フッターの高さを指定する */
}
.footer_logo_en {
    width: 150px;
}
.footer_logo_jp_02 {
    width: 105px;
}
}
@media screen and (min-width: 600px) {
#wrapper_footer  {
    height: 50px; /* フッターの高さを指定する */
}
.footer_logo_en {
    width: 225px;
    padding:7px 0 0 40px;
}
.footer_logo_jp_02 {
    width: 157px;
}
}
@media screen and (min-width: 1100px) {
#wrapper_footer  {
    height: 60px; /* フッターの高さを指定する */
}
.footer_logo_en {
    width: 300px;
}
.footer_logo_jp_02 {
    width: 210px;
}
}
@media screen and (min-width: 1400px) {
#wrapper_footer  {
    height: 60px; /* フッターの高さを指定する */
}
.footer_logo_en {
    width: 300px;
}
.footer_logo_jp_02 {
    width: 210px;
}
.footer_inner {
    max-width: 1080px;
}
}







/* index_img
------------------------------------------------------------*/
.img_padding_top_1-5em_sp {
}
@media screen and (max-width: 599px) {
.img_padding_top_1-5em_sp {
    padding-top: 1.5em;
}
}




/* button アニメーション　https://www.nxworld.net/tips/css-ghost-button-good-chemistry-hover-effect.html
------------------------------------------------------------*/
.wrapper_button_basic {
    padding:1em 0 2em;
    text-align: center;
}
.button_basic {
  display: inline-block;
  padding: .4em 0 .3em;
  border: 1px solid #dad6ca;
  border-radius: 30px;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .3s;
  width: 9em;
  font-size: 120%;
  color: #777777;
  background-color: rgba(201,186,177,0);
}
.button_basic_bg-white {
  background-color: rgba(255,255,255,0.6);
}
.button_basic:hover {
  color: #fff;
  background-color: #333333;
}

.button_square {
  display: inline-block;
  padding: 1em 0 .8em;
  border: 1px solid #333;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .3s;
  width: 9em;
  font-size: 120%;
  color: #333;
  background-color: rgba(201,186,177,0);
}
.button_square:hover {
  color: #fff;
  background-color: #333333;
}
.button_square_02 {
  display: inline-block;
  padding: 1em 0 .8em;
  margin: .5em 0 1em;
  border: 1px solid #999;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .3s;
  width: 9em;
  font-size: 120%;
  color: #000;
  background-color: rgba(201,186,177,0);
  background-color: #e9e9e9;
}
.button_square_02:hover {
  color: #fff;
  background-color: #333;
}
.button_square_03 {
  display: inline-block;
  padding: 1em 0 .8em;
  border: 1px solid #6f6f6f;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .3s;
  width: 9em;
  font-size: 120%;
  color: #fff;
  background-color: #6f6f6f;
}
.button_square_03:hover {
  color: #333;
  background-color: rgba(201,186,177,0);
}
.button_square_04 {
  display: inline-block;
  padding: 1em 0 .8em;
  border: 1px solid #ffffff;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .3s;
  width: 9em;
  font-size: 120%;
  color: #fff;
  background-color: #6f6f6f;
}
.button_square_04:hover {
  color: #333;
  background-color: #f6f6f6;
}
.button_square_05 {
  display: inline-block;
  padding: .8em 0 .6em;
  border: .5px solid #ffffff;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .3s;
  width: 9em;
  font-size: 120%;
  color: #fff;
  background-color: rgba(255,255,255,0.4);
}
.button_square_05:hover {
  color: #333;
  background-color: rgba(255,255,255,0.7);
}
.button_square_06 {
  display: inline-block;
  padding: .8em 0 .7em;
  border: 1px solid #6f6f6f;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .3s;
  width: 9em;
  font-size: 120%;
  color: #fff;
  background-color: #6f6f6f;
}
.button_square_06:hover {
  color: #333;
  background-color: rgba(201,186,177,0);
}


@media screen and (max-width: 599px) {
.wrapper_button_basic {
    padding:1em 0 .5em;
}
.button_basic {
    font-size: 100%;
}
.button_square {
    font-size: 15px;
}
.button_square_02 {
    font-size: 13px;
}
.button_square_03 {
    font-size: 15px;
}
.button_square_04 {
    font-size: 9px;
}
.button_square_06 {
    font-size: 13px;
}
}
@media screen and (min-width: 600px) {
.wrapper_button_basic {
    padding:1em 0 1.5em;
}
.button_basic {
    font-size: 120%;
}
.button_square {
    font-size: 16px;
}
.button_square_02 {
    font-size: 13px;
}
.button_square_03 {
    font-size: 16px;
}
.button_square_04 {
    font-size: 9px;
}
.button_square_06 {
    font-size: 14px;
}
}
@media screen and (min-width: 700px) {
.wrapper_button_basic {
    padding:1em 0 1.5em;
}
.button_square_04 {
    font-size: 12px;
}
}
@media screen and (min-width: 800px) {
.button_square {
    font-size: 18px;
}
.button_square_02 {
    font-size: 14px;
}
.button_square_03 {
    font-size: 18px;
}
.button_square_04 {
    font-size: 14px;
}
.button_square_05 {
    font-size: 18px;
}
.button_square_06 {
    font-size: 16px;
}
}








/* fadein アニメーション
------------------------------------------------------------*/
/* 画面外にいる状態 */
.fadein {
    opacity : 0;
    transform : translate(0, 30px);
    transition : all 500ms;
    }

/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }







/* button アニメーション　https://www.nxworld.net/tips/css-ghost-button-good-chemistry-hover-effect.html
------------------------------------------------------------*/
.button {
  display: inline-block;
  padding: 1em 0 .8em;
  border: 1px solid #bbb;
  color: #777;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .3s;
    width: 100%;
    font-size: 120%;
}
.button:hover {
  background-color: rgba(178,212,191,.3);
  border-radius: 30px;
  border-color: #dee8e2;
	color: #333;
}
.button_02 {
  display: inline-block;
  padding: .4em 0 .3em;
  border: 1px solid #dad6ca;
  color: #fff;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .3s;
    background-color: #372822;
    width: 9em;
    font-size: 120%;
}
.button_02:hover {
  background-color: rgba(201,186,177,0);
  border-radius: 30px;
  color: #372822;
}
.button_03 {
  display: inline-block;
  padding: .4em 0 .3em;
  border: 1px solid #dad6ca;
  color: #fff;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .3s;
    background-color: #666;
    width: 13em;
    font-size: 120%;
}
.button_03:hover {
  background-color: rgba(255,255,255,1);
  border-radius: 30px;
  color: #666;
}
.button_04 {
  display: inline-block;
  padding: .2em 0 0em;
  border: 1px solid #dad6ca;
  color: #999;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .3s;
    width: 48.5%;
    margin-top: .5em;
	box-sizing: border-box;
}
.button_04:hover {
  background-color: rgba(201,186,177,.3);
  border-radius: 20px;
}
.button_line-height_18 {
	line-height: 1.8em;
}
@media screen and (max-width: 599px) {
.button {
    font-size: 110%;
}
.button_03 {
    font-size: 100%;
}
.button_04 {
    width: 100%;
    margin-top: .5em;
}
.button_04:first-child {
    margin-top: .2em;
}
}




@media screen and (min-width: 600px) {
.button_04 {
    width: 48%;
    margin-top: .8em;
}
}
@media screen and (min-width: 800px) {
.button_04 {
    width: 48.5%;
    margin-top: .5em;
}
}



/* button wrapper
------------------------------------------------------------*/
.wrapper_button {
    margin: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
	width:100%;
}
.button_inner_two {
	width:30%;
	text-align: center;
    padding-top: 5px;
}
@media screen and (max-width: 599px) {
.button_inner_two {
	width:100%;
}
.button_inner_two {
    padding-top: 10px;
}
}

@media screen and (min-width: 600px) {
.button_inner_two {
	width:48%;
}
}
@media screen and (min-width: 800px) {
.button_inner_two {
	width:40%;
}
}
@media screen and (min-width: 900px) {
.button_inner_two {
	width:30%;
}
}




/* footer_button アニメーション　https://www.nxworld.net/tips/css-ghost-button-good-chemistry-hover-effect.html
------------------------------------------------------------*/
.wrapper_footer_btn {
	width: 443px;
    position:fixed;
    bottom:0;
    right:50px;
    display: flex;
    padding: 0;
    flex-wrap: wrap;
    justify-content: space-between;
    align-self: center;
}
.wrapper_footer_btn_inner {
}
.footer_btn_img {
	width: 200px;
	height: auto;
}
.footer_btn_img:hover {
	opacity: 0.8;
}

.button_square_footer_btn {
  display: inline-block;
  padding: .5em 0 .3em;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .3s;
  width: 220px;
  font-size: 120%;
  color: #fff;
}
.button_square_footer_btn:last-child {
}


.button_square_footer_btn_bg-black {
  background-color: rgba(0,0,0,0.9);
}
.button_square_footer_btn_bg-black:hover {
  background-color: rgba(0,0,0,0.7);
}
.button_square_footer_btn_bg-gray {
  background-color: rgba(80,80,80,0.9);
}
.button_square_footer_btn_bg-gray:hover {
  background-color: rgba(80,80,80,0.7);
}
.button_square_footer_btn_bg-moss-green {
  background-color: #658281;
  opacity: 0.9;
}
.button_square_footer_btn_bg-moss-green:hover {
  background-color: #658281;
  opacity: 0.7;
}
.button_square_footer_btn_bg-light-green {
  background-color: #628258;
  opacity: 0.9;
}
.button_square_footer_btn_bg-light-green:hover {
  background-color: #628258;
  opacity: 0.7;
}

.footer_btn_001 {
  border: solid #ffffff;
  border-width: 1px 0px 0px 1px;
}
.footer_btn_001:last-child {
  border-width: 1px 1px 0px 1px;
}



@media screen and (max-width: 599px) {
.wrapper_footer_btn {
	width: 100%;
    bottom:0;
    right:0;
}
.footer_btn_img {
	width: 60%;
}
.button_square_footer_btn {
  width: 100%;
}
.footer_btn_001 {
  width: 50%;
  box-sizing: border-box;
  border-width: 1px 1px 0px 0px;
}
.footer_btn_001:last-child {
  border-width: 1px 0px 0px 0px;
}
}
@media screen and (min-width: 600px) {
.wrapper_footer_btn {
	width: 333px;
    bottom:0;
    right:50px;
}
.footer_btn_img {
	width: 140px;
}
.button_square_footer_btn {
  width: 165px;
}
}
@media screen and (min-width: 700px) {
}
@media screen and (min-width: 1100px) {
.wrapper_footer_btn {
	width: 429px;
    bottom:0;
    right:52px;
}
.footer_btn_img {
	width: 180px;
	width: 170px;
}
.button_square_footer_btn {
  width: 213px;
}
}


/* link btn wrapper
------------------------------------------------------------*/
.contents_lp_wrapper{
	margin: auto;
	width: 90%;
	max-width: 700px;
}
.contents_lp_001 {
    margin: auto;
	width: 90%;
	max-width: 700px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.contents_lp_002 {
    margin: auto;
	width: 90%;
	max-width: 700px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.contents_lp_001_inner {
	margin: auto;
}
.contents_lp_002_inner {
	margin: auto;
	padding-bottom: 2em;
	width: 45%;
}
.button_contents_lp_001 {
	width: 100%;
	line-height: 1.5em; 
	padding: .6em 0 .5em;
}
@media screen and (max-width: 473px) {

.contents_lp_001_inner:first-child {
	padding-bottom: 2.8em;
}
.contents_lp_002_inner {
	width: 100%;
}
}
@media screen and (min-width: 474px) {
.contents_lp_001_inner:first-child {
	padding-bottom: 0;
}
.contents_lp_002_inner {
	width: 45%;
}
}
@media screen and (min-width: 800px) {
}




/* 料金表
------------------------------------------------------------*/	
.topics_price {
    font-size: 110%;
    width: 100%;
    margin: 1.5em auto 2.5em;
    border-top: 1px dotted #ccc;
}
.topics_price dl {
    padding: 1.3em 0 1.5em;
    border-bottom: 1px dotted #ccc;
    line-height: 1.8em
}
.topics_price dl a {
    display: block;
}
/*
.topics_price dl:hover{
    background-color: #f3f3f3;
}
*/	
.topics_price dl:first-child {
}
.topics_price dt {
    color: #5f836d;
	font-weight: 500;
	padding: .5em 0;
}
.topics_price dt.dt_02 {
    color: #5f836d;
	font-weight: 500;
	font-size: 18px;
	padding: .8em 0 0em;
	clear: both;
	float: none;
	width: 100%;
}
.topics_price dd.dd_02 {
    margin: 0;
}
.p_topics_price_20230920 {
	width: 100%;
	border-bottom: solid 1px #5f836d;
	padding: .7em 0 .3em;
	margin: auto;
	box-sizing: border-box;
	font-size: 15px;
	color: #666;  
	font-weight: 500;
}
.p_topics_price_20230920 span {
	display: block;
	font-size: 12px;
	line-height: 2.5em;
	color: #bbb;  
	font-weight: 200;
}
.p_topics_price_20230920_002 {
	padding: .5em 0 .5em;
	line-height: 2em;
}
.p_topics_price_20230920_002:last-child {
	padding: .5em 0 .2em;
}

@media screen and (max-width: 599px) {
.topics_price {
    width: 85%;
    font-size: 100%;
}
.topics_price dt {
	padding: .8em 0 .5em;
}
.topics_price dt.dt_02 {
	font-size: 13px;
}
.p_topics_price_20230920 {
	font-size: 14px;
}
.p_topics_price_20230920 span {
	font-size: 9px;
}
}

@media screen and (min-width: 600px) {
.topics_price {
    width: 85%;
}
.topics_price dt {
    clear: left;
    float: left;
    width: 10em;
	padding: .5em 0 .5em;
}
.topics_price dt.dt_02 {
	font-size: 15px;
}
.topics_price dt.dt_15em {
    clear: left;
    float: left;
    width: 15em;
}
.topics_price dd {
    margin-left: 10.2em;
}
.p_topics_price_20230920 {
	font-size: 15px;
}
.p_topics_price_20230920 span {
	font-size: 11px;
}
}






/* footer 固定　https://proengineer.internous.co.jp/content/columnfeature/6491#2
------------------------------------------------------------*/

#wrapper_footer_fixed  {
position: fixed; /* フッターを固定する */
bottom: 0; /* 上部から配置の基準位置を決める */
left: 0; /* 左から配置の基準位置を決める */
width: 100%; /* フッターの横幅を指定する */
height: 60px; /* フッターの高さを指定する */
padding:5px 0; /* フッター内側の余白を指定する(上下左右) */
color: #000000; /* フッターのフォントの色を指定する */
background-color: rgba(0,0,0, .1); /* フッターの背景色を指定する */
}
.footer_inner {
    text-align: center;
    padding-top: 5px;
}


@media screen and (max-width: 599px) {
#wrapper_footer_fixed  {
    height: 40px; /* フッターの高さを指定する */
}
.footer_inner {
    padding-top: 9px;
}
}
@media screen and (min-width: 600px) {
#wrapper_footer_fixed  {
    height: 50px; /* フッターの高さを指定する */
}
.footer_inner {
    padding-top: 11px;
}
}
@media screen and (min-width: 1100px) {
#wrapper_footer_fixed  {
    height: 60px; /* フッターの高さを指定する */
}
.footer_inner {
    padding-top: 17px;
}
}
@media screen and (min-width: 1400px) {

}



/* footer
------------------------------------------------------------*/
#footer {
	margin:0px 0 0;
	padding:15px 0 10px;
	background-color: #ffffff;
    border-top: 1px solid #eee;
}
#footer_wrapper {
	width: 980px;
	color:#36514d;
	padding:0;
	margin:0 auto;
}
@media screen and (max-width: 599px) {
#footer {
	margin-bottom: 50px;
}
#footer_wrapper {
    width:98%;
}
}
@media screen and (min-width: 600px) {
#footer {
	margin-bottom: 55px;
}
#footer_wrapper {
    width:98%;
}
}
@media screen and (min-width: 1000px) {
#footer_wrapper {
	width: 980px;
}
}
@media screen and (min-width: 1100px) {
#footer {
	margin-bottom: 65px;
}
}

/* #footer_navi
------------------------------------------------------------*/
#footer_navi_wrapper {
}
#footer_navi {
	margin: auto;
	padding: 15px 0 15px;
	color: #5f836d;
}
#footer_navi a {
	color: #5f836d;
}
#footer_navi a:hover {
	color: #36514d;
}
#footer_navi ul.ul_footer_navi li {
    border-left: 1px solid #5f836d;
    display: inline;
	padding: 0 1em 0 1em;
	height: 1.8em;
	line-height: 1.8em;
	margin:0.3em 0 -0.3em;
}
#footer_navi ul.ul_footer_navi li:last-child {
	padding-right: 1em;
    border-right: 1px solid #5f836d;
}

@media screen and (max-width: 599px) {
#footer_navi_wrapper {
	font-size: 7.5px;
	text-align: center;
}
}
@media screen and (min-width: 600px) {
#footer_navi_wrapper {
	font-size: 14px;
	text-align: center;
}
}
@media screen and (min-width: 1000px) {
#footer_navi_wrapper {
	font-size: 14px;
	float: left;
}
}

/* #footer_instagram
------------------------------------------------------------*/
#footer_instagram_wrapper {
}
#footer_instagram img {
	width: 30px;
	margin: 0 0 0 0;
	padding: 10px 0 15px;
}
@media screen and (max-width: 599px) {
#footer_instagram_wrapper {
	text-align: center;
}
#footer_instagram img {
	width: 20px;
	margin: 0;
	padding:0;
}
}
@media screen and (min-width: 600px) {
#footer_instagram_wrapper {
	text-align: center;
}
#footer_instagram img {
	padding-top:20px;
}
}
@media screen and (min-width: 1000px) {
#footer_instagram_wrapper {
	float: left;
}
#footer_instagram img {
	padding-top:10px;
}
}
	
/* Company name
------------------------------------------------------------*/
.company_name {
    }
	
/* Copyright
------------------------------------------------------------*/
.copyright {
    margin:0 auto;
    text-align:center;
    font-style:normal;
	color: #999999;
	padding: 15px 0 15px;
	font-size: 14px;
	height: 20px;
	line-height: 20px;
    }
@media screen and (max-width: 599px) {
.copyright {
    padding:8px 0px 0px 0;
	font-size: 8px;
	}
}
@media screen and (min-width: 1000px) {
.copyright {
	float: right;
}
}



	
	
/* contents pagetop
------------------------------------------------------------*/
.pagetop {
	text-align: right;
	padding: 50px 2em 0px 0;
    }
.pagetop a{
	color: #bbb;
    }
.pagetop a:hover{
    color: #0852a1;
    }	
@media screen and (max-width: 599px) {
.pagetop {
	display: none;
    }	
.sp_display_none {
		display: none !important;
	}
}
@media screen and (min-width: 600px) {
.pagetop {
	display: block;
    }	
}
@media screen and (min-width: 1000px)  {
.pagetop {
	padding: 10px 2em 10px 0;
	display: block;
    }	
}		

.gototop {
    position:fixed;
    bottom:20px;
    right:20px;
}
.gototop img.img_gototop {
    width: 50px;
}
@media screen and (max-width: 599px) {
.gototop {
    position:fixed;
    bottom:60px;
    right:8px;
}
.gototop img.img_gototop {
    width: 40px;
}
}

@media screen and (min-width: 600px) {
.gototop {
    bottom:70px;
}
}
@media screen and (min-width: 1100px) {
.gototop {
    bottom:80px;
}
}



/* youtube レスポンシブ
------------------------------------------------------------*/	
.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}


/* google map レスポンシブ 参考：https://inthecom.net/718
------------------------------------------------------------*/	
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}



/* ドット ナビゲーション　https://kata-tip.com/current-nav/
------------------------------------------------------------*/	
.wrap {
  width: 100%;
}

.nav-dot {
  position: fixed;
  top: 50%;
  top: calc(50% - 33px);
  right: 3%;
  z-index: 99;
}

.nav-dot li {
  width: 6px;
  height: 6px;
  margin: 0 0 14px;
  background: rgba(58, 58, 58, 0.2);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.nav-dot li.current {
  background: rgba(58, 58, 58, 0.5);
  transition: background 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.nav-dot li:last-child {
  margin: 0;
}

.block {
  height: 800px;
}



/*==================================================
スライダーのためのcss モデルハウスページ
===================================*/
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 3px;
}
.slider_pc .slick-slide {
    margin:0 3px;
}
.slider_sp .slick-slide {
    margin:0 3px;
}




@media screen and (max-width: 599px) {
}
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 1000px) {
}