@charset "utf-8";
/*=============================
　common → 共通★骨組み
　style → 共通★修飾
　pagename* → 各ページ
　2020.09.07........... ver0.0
=============================*/


/* ===============　定番アイテム追加項目　================== */

body { background-color: #151414;}
p {text-align:justify;}


.bg_washi {
  background-image: url("../images/bg_washiBL.jpg");
  background-repeat: repeat;}

h1, h2, .h1, .h2 {
  font-weight: 700;
  text-align: center;
  margin-bottom: 3rem;}

h1, .h1 { font-size: 3rem;}
@media (min-width: 576px) {
  h1, .h1 { font-size: 3.2rem;}
}

h2, .h2 { font-size: 2rem;}
@media (min-width: 576px){
  h2, .h2 { font-size: 2.6rem;}
}
@media (min-width: 768px) {
  h2, .h2 { font-size: 2.4rem;}
}

.text90 {font-size: .9em;}
.text80 {font-size: .8em;}
.text50 {font-size: .5em;}


a,a:hover { color: rgba(250,250,250,0.3);}
section {	padding: 4rem 0 0;}
section#footer { padding: 0;}

/*jquery.inview*/
.inView_fadeInUp,
.inView_fadeInList li {
	opacity: 0;}



/*=============================
　 エフェクト
=============================*/

.effect {
  position: relative;
  overflow: hidden;
  transition: 0.5s ease-in-out;}
.effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 97%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  transition: 0.5s ease-in-out;}
.effect:hover::before {
  left: 0;}

.effect2 {
  position: relative;
  overflow: hidden;
  transition: 0.8s ease-in-out;}
.effect2::before {
  z-index: 10;
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: -moz-linear-gradient(left, rgba(4, 87, 124, 0.05)20%, rgba(4, 87, 124, 0.2) 85%, rgba(4, 87, 124, 0.3));
  background: -webkit-linear-gradient(left, rgba(4, 87, 124, 0.05)20%, rgba(4, 87, 124, 0.2) 85%, rgba(4, 87, 124, 0.3));
  background: linear-gradient(to right, rgba(4, 87, 124, 0.05)20%, rgba(4, 87, 124, 0.2) 85%, rgba(4, 87, 124, 0.3));
  transition: 0.8s ease-in-out;}
.effect2:hover::before {
  left: 0;}


.effect3 {
  /*position: relative;*/
  overflow: hidden;
  transition: 0.8s ease-in-out;}
.effect3::before {
  z-index: 10;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -moz-linear-gradient(top, rgba(4, 87, 124, 0.0)50%, rgba(4, 87, 124, 0.05) 60%, rgba(4, 87, 124, 0.15));
  background: -webkit-linear-gradient(top, rgba(4, 87, 124, 0.0)50%, rgba(4, 87, 124, 0.05) 60%, rgba(4, 87, 124, 0.15));
  background: linear-gradient(to bottom, rgba(4, 87, 124, 0.0)50%, rgba(4, 87, 124, 0.05) 60%, rgba(4, 87, 124, 0.15));
  transition: 0.8s ease-in-out;}
.effect3:hover::before {
  top: -100%;}
.btn-arrow-scale,
.effect3 span {
    z-index: 10;}


/* ふわっと表示（フェードイン） */
.fadein {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:2s;
 -ms-animation-duration:2s;
 animation-duration:2s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px);}
 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


/*=============================
　 ラインマーカー　.marker
=============================*/

.marker { background: linear-gradient(transparent 60%, rgba(255, 255, 0, 0.5) 0%);}



/*=============================
　 テキストシャドウ　.text-shadow
=============================*/

.text-shadow01 {  text-shadow: 1px 2px 3px #333;}
.text-shadow01 {  text-shadow: 1px 2px 3px #fff;}


/*=============================
　 文字に縁取り　.fuchi
=============================*/

@media (max-width: 575px) {
  .fuchi {
   text-shadow: #fff 1px 1px 0px, #fff -1px 1px 0px,
             #fff 1px -1px 0px, #fff -1px -1px 0px;}
}

/*=============================
　 −右と左に水平線−　.line_lr
=============================*/

h2.line_lr {
  width: 88%;
  margin: 6px auto;
  padding: 0 17%;
  text-align: center;
  position: relative;}
.line_lr::before,
.line_lr::after  {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 30%;
	height: 1px;
	border-top: 1px solid #151414;}
.line_lr::before {left:0;}
.line_lr::after {right: 0;}
@media (min-width: 576px) {
  h2.line_lr {
    margin: 10px auto;}
}
@media (min-width: 768px) {
  h2.line_lr {
    margin: 20px auto;}
}

/* 水平線 */
.line {text-decoration: line-through;}

/*=============================
　  背景色（ gr=グラデーション　tr=透明Transparent ）
=============================*/

.bg-none { background-color: inherit;}

.bg_gr_gray {
  background: linear-gradient(to right, rgba(235, 239, 242, 0.8), rgba(250, 250, 252, 0.5));}
.bg_gr_green {
  background: linear-gradient(to right, #E6F5DC, #E6FAF5);}
.bg_gr_blue {
  background: linear-gradient(to right, rgba(245, 247, 255, 0.3), rgba(134, 253, 232, 0.3));}
.bg_tr_blue { background: rgba(181,243,255,0.2);}
.bg_tr_green { background: rgba(131, 223, 138, 0.1);}

.bg_gray  { background-color: #333;}
.bg_gray1 { background-color: #F4F4F4;}
.bg_gray2 { background-color: #F4F6FF;}

.bg_white   { background-color: rgba(255, 255, 255, 1);}
.bg_white50 { background-color: rgba(255, 255, 255, 0.5)!important;}

.bg_rightUp { transform: skewY(-2deg);  transform-origin: top left;}/* 斜め右上がり */
.bg_leftUp  { transform: skewY(-2deg);  transform-origin: top right;}/* 斜め左上がり */

.bg_triangle { /* 下向き▼ */
  border-color: #151414 transparent transparent transparent;
  border-style: solid;
  border-width: 50px 50vw 0vh 50vw;
  width: 0;
  height: 0;}

.bg_dot1 { /* グレーのドット */
  background-color: #FAFAFA;
  background-image: radial-gradient(#eee 10%, transparent 20%), radial-gradient(#eee 10%, transparent 20%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;}
.bg_dot2 { /* ブルーのドット */
  background-color: #FAFAFA;
  background-image   : radial-gradient(#0071BB 2%, transparent 5%),
                       radial-gradient(#0071BB 2%, transparent 5%);
  background-position: 0 0, 10px 10px;
  background-size    : 22px 22px;}

.bg_stp_blue { /* ブルーのストライプ */
  background: repeating-linear-gradient(-45deg, #97E2FF, #97E2FF 5px, #D3FFFB 5px, #D3FFFB 10px);}

.is-layer-dot { /* 動画などの上にドット乗せ */
  position: relative;}

.is-layer-dot::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    display: block;
    background-color: rgba(0, 0, 0, .4);
    background-image: radial-gradient(#000 20%, transparent 0), radial-gradient(#000 20%, transparent 0);
    background-position: 0 0, 10px 10px;
    background-size: 4px 4px;}



/*=============================
　 テーブル　　　 table
=============================*/

table {
  margin-bottom: 6rem;
	table-layout: fixed;}
.table_01 {
	width: 100%;}
.table_01 th,
.table_01 td {
	vertical-align: top;
	padding: 3rem;
  width: auto;
	border: 1px solid #969696;}
.table_01 th {
  background-color: #151414;
  color: #fff;
	width: 11em;}

.table_01 td {
  background-color: #fff;
  color: #151414;
  font-weight: bold;
	font-size: 120%;}

@media only screen and (max-width:575px) {
	.table_01 th,
	.table_01 td {
		padding: 1.5rem .5rem 1.5rem 1.5rem;}
	.table_01 tr:last-child td {
		padding-bottom: 0;}
	.table_sp,
	.table_sp tr,
	.table_sp th,
	.table_sp td {
		width: 100% !important;	}
	.table_sp tr,
	.table_sp th,
	.table_sp td {
		display: block;	}
}
.table_total {border: solid 2px #6b1d00;}
.table_total td {color: #6b1d00;}
.table_total th {background-color: #6b1d00;}

span.unit { font-size: 0.8em;}


/*=============================
　  ホバーデザイン.hoverFade .link_txt
=============================*/

.hoverFade {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;}
.hoverFade:hover {
	text-decoration: none;
	opacity: 0.6;}

.link_txt {
  position: relative;
	display: inline-block;}
.link_txt::after {
	position: absolute;
	bottom: 50%;
	left: -5%;
	width: 110%;
	height: 2px;
	content: '';
	transition: all 0.5s ease;
	opacity: 0;
	border-radius: 10px;
	background-color: rgb(238, 255, 122);
  z-index: -1;}
.link_txt:hover:after {
	bottom: 0;
	height: 100%;
	opacity: 0.3;}

/* -- ホバーで拡大表示 -- */
.image_mouseover {
overflow: hidden;
width: 100%;
height: 100%;}
.image_mouseover img {
display: block;
transform: scale(1);
transition-duration: 0.5s;}
.image_mouseover img:hover {
transform: scale(1.2);
transition-duration: 0.5s;}

/* -- ホバーで拡大表示と一緒に使う縦横比率たもつ枠 .image_box -- */
.image_box {
	position: relative;
  width: 100%;
  background-color:#fff;
	}
.image_box:before{
  content:'';
  display:block;
  height:0;
  padding-top:67.64%; /* 写真の縦幅÷横幅の100倍 */
}
.image_box img{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  width:100%;
}


/*=============================
　  固定バナー .bnr_fix 
=============================*/

.bnr_fix {
  display: block;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 60px;
  height: 200px;
  z-index: 99;}
.bnr_fix .bnr_dl {
  display: block;
  width: 100%;
  height: auto;
  transition: all .5s;}
.bnr_fix .bnr_dl img {
  padding: 5px;
  width: 100%;
  height: auto;}
.bnr_fix .bnr_dl img {
  display: block;
  position: relative;
  z-index: 1;}
.bnr_dl {
  position: relative;}

@media (max-width: 767px) {
  .bnr_fix .bnr_dl {
    padding: 0 20px 0 0;}
}

.bnr_fix.pagetop a::before {
  content: none;}

@media screen and (max-width: 767px) {
	.f_bottom {
		font-size: 1.1rem;
		margin-top: 0;}
}



/*=============================
　  ボタンデザイン .btn  .button
=============================*/

.btn-group {
  display: flex;
  justify-content: space-between;
  padding-bottom: 50px;
  flex-direction: column;
  align-items: center;}
@media (min-width: 768px) {
  .btn-group {
    flex-direction: row;
  }
}
.button01,.button01::before,.button01::after {transition: all .3s;}
.button01 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 98%;
  height: 100px;
  margin-bottom: 20px;
  padding: 10px 40px;
  text-align: center;
  background-color: #151414;
  border: 3px solid #6b1d00;
  color: #6b1d00;
  overflow: hidden;
  z-index: 2;}
@media (min-width: 768px) {
  .button01 {
    width: 48%;}}
.button01::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;border-bottom: 20px solid transparent;
  border-left: 20px solid #6b1d00;
  z-index: 3;}
.button01::before,
.button01::after {
  content: '';
  position: absolute;
  z-index: -1;
  display: block;}
.button01::after {
  top: -100%;
  left: -100%;
  width: 100%;
  height: 100%;}
.button01:hover {color: #151414;}
.button01:hover::after {
  top: 0;
  left: 0;
  background-color: #6b1d00;}
.button02 {
  display: block;
  margin: auto;
  text-align: center;
  padding: 15px;}

.button03 {
  display: block;
  width: 14em;
  background-color: #6b1d00;
  line-height: 2.6em;
  text-align: center;
  margin: 1em auto 0;
  position: relative;}
.button03::before,
.button03::after {
 content: '';
 border-style: solid;
 border-width: 0;
 position: absolute;
 width: 0;
 height: 0;
 border-color: transparent #6b1d00;}
.button03::before {
 left: -1.3em;
 border-width: 1.3em 1.3em 1.3em 0;}
.button03::after {
 right: -1.3em;
 border-width: 1.3em  0 1.3em 1.3em;}

/* ボタンデザイン追加 .btn ＆ .btn- */
.btn {
  margin: 15px auto 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20em;
  height: 4em;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  position: relative;
  z-index: 1;}
.btn::before, .btn::after {
  content: '';
  display: block;
  position: absolute;
  transition: 0.5s;
  z-index: -1;}
.btn:hover { color: rgba(255,255,255,1);}
@media (min-width: 576px) {
  .btn {
    width: 26em;}

 
}

.contact_info .btn { width: 80%;}



   /* ホバーで枠ずれ */
.btn-01 { color: rgba(255,255,255,0.8);}
.btn-01::before, .btn-01::after {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255,255,255,0.8);}
.btn-01::before {
  left: 0px;
  top: 0px;}
.btn-01::after {
  right: 0px;
  bottom: 0px;}
.btn-01:hover::before {
  left: -3px;
  top: -3px;
  background-color: rgba(255,255,255,0.2)}
.btn-01:hover::after {
  right: -3px;
  bottom: -3px;}

/*=============================
　  リストデザイン .list_txt
=============================*/

.list_txt {margin-bottom: 40px;}

.list_txt li {
  padding-bottom: 1.5rem;
  font-size: 1.5rem;
  color: #151414;}
.list_txt li::before {
  content: '〆';
  color: #6b1d00;
  margin-right: 0.5em;}
@media (min-width: 992px) { 
  .list_txt li {
    display: inline-block;
    width: 48%;}
  .list_txt li:first-child {
    width: 100%;}
}


/*=============================
　  見出し＆ボックスデザイン
=============================*/

.check_box01 {
  font-size: 1.6rem;
  font-weight: bold;
	position: relative;
	padding: 1.5rem 1rem 1rem;
  margin-bottom: 20px;
  background-color: #fff;
	border: 1px solid #6b1d00;}
.check_box01::after {
	content: 'check!';
	position: absolute;
	top: -8px;
	left: 10px;
	background: #6b1d00;
	font-size: 14px;
  font-weight: normal;
	color: #E3C4C3;
  padding: 0 10px;}


/* === 斜めクロス背景 ========== */

[class^="bg_pattern_0"] {
  position: relative;
  color: #fff;}

[class^="bg_pattern_0"]:nth-of-type(odd)::after {
  transform: skewY(2deg);}
[class^="bg_pattern_0"]:nth-of-type(even)::after {
  transform: skewY(-2deg);}

[class^="bg_pattern_0"]:nth-of-type(odd)::before {
  transform: skewY(-2deg);}
[class^="bg_pattern_0"]:nth-of-type(even)::before {
  transform: skewY(2deg);}

[class^="bg_pattern_0"]::before,
[class^="bg_pattern_0"]::after {
  content: '';
  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.4));
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;}

.bg_pattern_01::after { background: url("../images/bg_01.svg") repeat;background-size: 6vw auto;    opacity: .3!important;}
.bg_pattern_02::after { background: url("../images/bg_02.svg") repeat;background-size: 6vw auto;}
.bg_pattern_03::after { background: url("../images/bg_03.svg") repeat;background-size: 6vw auto;    opacity: .3!important;}
.bg_pattern_04::after { background: url("../images/bg_04.svg") repeat;background-size: 6vw auto;}

[class^="bg_pattern_0"]::before {  background: rgba(107,29,0,0.5);}
[class^="bg_pattern_0"]::after {
  background-color: #af0502;
  opacity: .2;}


@media (min-width: 576px) {
  .bg_pattern_01::after,
  .bg_pattern_02::after,
  .bg_pattern_03::after,
  .bg_pattern_04::after { background-size: 4vw auto;} 
}
@media (min-width: 992px) { 
  .bg_pattern_01::after,
  .bg_pattern_02::after,
  .bg_pattern_03::after,
  .bg_pattern_04::after { background-size: 2vw auto;} 
}

/*=============================
　 テキスト　.main_copy
=============================*/

.main_copy {
  text-align: left;
  padding: 80px 0 50px;
  color: #fafafa;
  font-size: 1.8rem;
  line-height: 2.8em;
  z-index: 2;
  position: relative;}
@media (min-width: 576px) {
   .main_copy {
     text-align: center;
     padding: 50px 0;}
}


/*=============================
　 サイトカラー
=============================*/

h1,h2,h3,h4,
.txt_main {color: #fafafa;} /* 白 */
.bg_main {background-color: #151414;} /* 黒 */

.txt_sub {color: #151414;} /* 黒 */
.bg_sub {background-color: rgba(107,29,0,0.8);} /* 赤茶 */

.txt_sub2 {color: #6b1d00;} /* 赤茶 */
.bg_sub2 {background-color: #6b5413;} /* アクセントカラー */

.txt_p { color: #333;}
.txt_gray1 {color: #9A9A9A;}
.txt_gray2 {color: #4C524C;}



/*=============================
　 背景オブジェクト
=============================*/

.bg_right::after {
  content: '';
  background-image: url("../images/img_kumo-right.svg");
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;}

.top-bg_img {
  background: url("../images/bg_mon20.svg") no-repeat -100px -50px;
  background-size: 75%;
  position: relative;}
@media (min-width: 992px) {
  .top-bg_img {
    background-size: 660px;}

}

/* 写真の薄黒いフィルタ */
.filter01 {position: relative;}
.filter01::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: -1px;
  background: linear-gradient(to bottom, rgba(20,20,20,1) 0%, rgba(20,20,20,0.79) 35%, rgba(27,27,27,0.75) 41%, rgba(43,43,43,0.36) 55%, rgba(94,94,94,0.28) 100%);
  z-index: 2;}

@media (min-width: 992px) { 
  .pic_box_02 .filter01::before {
    content: '';
    width: 93%;}

}

/* 水平線 */
span.hr_bl {
  display: block;
  width: 100%;
  border-bottom: solid 1px #828282;
  margin-bottom: 10px;}

/* 凹んだボーダー */
.border_01 {
  margin: 20px 0;
  width: 100%;
  height: 2px;
  display: block;
  background-image: url("../images/border_01.svg");
  background-repeat: repeat-x;  }


/*=============================
　 カードデザイン
=============================*/

.card {
  color: #fff;
  background-color: #333;
  margin: 15px 30px;
  padding: 30px 20px;
  border: none;
  border-radius: 0rem;
  box-shadow: 0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12);}
.card img { margin-bottom: 30px;}


/*=============================
　 テキスト その他デザイン
=============================*/

.txt_01,
.txt_02 {
  line-height: 2.4;
  font-size: 1.2rem;
  letter-spacing: .15em;}
@media (min-width: 576px) {
  .txt_01 {
    line-height: 2.6;
    font-size: 1.4rem;} 
}

.txt_03 {}
.txt_04 {}
.txt_05 {}


.contact_info {
  position: relative;
  z-index: 1;}


.main_bg_right {
  opacity: .3;
  width: 40%;
  height: auto;
  position: absolute;
  top: -40%;
  right: 0;
  z-index: 3;}
@media (min-width: 992px) { 
  .main_bg_right {
    width: 400px;}
}


@media (min-width: 576px){
  #contact_info .box_01-txt {
    width: 94%;}
}