@charset "utf-8";

/* ----------------------------------------------------
  Google font　日本語
---------------------------------------------------- */
.jp01{font-family: 'Noto Sans JP', sans-serif;} /* ゴシック */
.jp02{font-family: 'Noto serif JP', sans-serif;} /* 明朝 */
.jp03{font-family: 'Zen Maru Gothic', sans-serif;} /* 丸ゴシック */

/* ----------------------------------------------------
  英字
---------------------------------------------------- */
.en01{font-family: "Cormorant Garamond", serif;} /* 明朝 */
.en02{font-family: "Playfair Display", serif;} /* 明朝　エレガント系 */
.en03{font-family: "Bodoni Moda", serif;} /* 明朝　筆記体 */
.en04{font-family: "Cal Sans", sans-serif;} /* 太ゴシック */

/* ----------------------------------------------------
  テキスト高さ
---------------------------------------------------- */
.text01{line-height: 30px; letter-spacing: 2px;}
@media print, screen and (min-width: 992px) { .text01{line-height: 35px;}}
@media print, screen and (min-width: 1200px) {.text01{line-height: 38px;}}

/* ----------------------------------------------------
  テキストリンク
---------------------------------------------------- */
.text01 a:link, .text01 a:visited,
.text01 a:hover, .text01 a:active{
  text-decoration:underline;
  color: #b71414; /* 任意色 */
}

/* ----------------------------------------------------
  文字寄せ
---------------------------------------------------- */
/*　スマホ左寄せ　ほか中央
---------------------------------------------------- */
.ctr-text01{text-align: left;}
@media print, screen and (min-width: 768px) {.ctr-text01{text-align: center;}}

/*　スマホ中央　ほか左寄せ
---------------------------------------------------- */
.ctr-text02{text-align: center;}
@media print, screen and (min-width: 768px) {.ctr-text02{text-align: left;}}

/*　スマホ中央　ほか右寄せ
---------------------------------------------------- */
.ctr-text03{text-align: center;}
@media print, screen and (min-width: 768px) {.ctr-text03{text-align: right;}}

/* ----------------------------------------------------
  文字色と背景色
---------------------------------------------------- */
/* 文字色
-------------------------- */
.white{color:#fff;}
.red{color:#b71414;}
.mizuiro{color:#00b0f0;}

/* 背景色
---------------------------------------------------- */
.bg_white{background: #fff;}
.bg_gray{background: #f5f5f5;}
.bg_black{background: #222;}
.bg_grd01 {background-image: linear-gradient(90deg, #22a6ce, #0053ba);}

/* パキっと分かれる */
.bg_separate_01{background: linear-gradient(to right, #a9cd1a 60px, #fff 60px);}
@media print, screen and (min-width: 768px) {
.bg_separate_01{background: linear-gradient(to right, #a9cd1a 37%, #fff 37%);}
}

.bg_01{background: url("../images/bg_01.jpg") no-repeat scroll 50% 0% / cover;}

/* ----------------------------------------------------
  ペン
---------------------------------------------------- */
.pen {background: linear-gradient(transparent 50%, #dfeea5 50%);}

/* ----------------------------------------------------
  画像並び替え
---------------------------------------------------- */
@media only screen and (max-width: 767px) {
.area_first_01{order:1;}
.area_last_01{order:2;}
}

/* ----------------------------------------------------
  name
---------------------------------------------------- */
.name{text-align: right;}
.name span{
  display: inline-block;
  margin-left: 5px;
  font-size: 22px;
}
@media print, screen and (min-width: 768px) {
.name span{
  margin-left: 10px;
  font-size: 26px;
  }
}

/* ----------------------------------------------------
  box_05
---------------------------------------------------- */
.box_05{
  padding:20px;
  background: #fff;
  border-radius: 20px;
}
@media print, screen and (min-width: 768px) {.box_05{ padding:40px;}}
@media print, screen and (min-width: 992px) {.box_05{ padding:60px;}}

.box_05 i{color: #00b0f0; font-size: 50px; margin-bottom: 15px;}
@media print, screen and (min-width: 768px) {.box_05 i{font-size: 50px; margin-bottom: 30px;}}
@media print, screen and (min-width: 992px) {.box_05 i{font-size: 80px; margin-bottom: 40px;}}

/* ----------------------------------------------------
  横フロー　
---------------------------------------------------- */
.flow_number_01{
	position:relative;
	background: #fff;
  padding:60px 10px 10px 10px;
	text-align: center;
  border-radius: 20px;
  margin-bottom: 20px;
}
.flow_number_01 h3{
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
.flow_number_01 p{
  margin-bottom: 15px;
} 

@media print, screen and (min-width: 768px) {
.flow_number_01{
    padding:60px 10px 20px 10px;
    margin-bottom: 30px;
  }
.flow_number_01 h3{
  font-size: 22px;
  } 
.flow_number_01 p{
  margin-bottom: 20px;
  } 
}

@media print, screen and (min-width: 1400px) {
  .flow_number_01{
    padding:60px 40px 30px 40px;
    margin-bottom: 50px;
  }
.flow_number_01 p{
  margin-bottom: 30px;
  }   
}

.flow_number_01 span{ 
	position:absolute;
	top:0;
	left:0;
	width: 50px;
	height: 50px;
	font-size: 20px;
	display:block;
	color:#fff !important;
	background: #00b0f0; /* 背景色 */
	padding:10px;
	text-align:center;
  border-radius: 20px 0 20px 0;  
	}
@media print, screen and (min-width: 768px) {
  .flow_number_01 span{
  	top:0;
  	left:0;
  	width: 50px;
  	height: 50px;
  	font-size: 20px;
  	padding:10px 25px 30px 13px;
	}
}
@media print, screen and (min-width: 1200px) {
  .flow_number_01 span{
  	top:0;
  	left:0;
  	width: 60px;
  	height: 60px;
  	font-size: 30px;
  	padding:14px 25px 30px 13px;
	}
}

/* ----------------------------------------------------
    画像　2枚重なる
---------------------------------------------------- */
.image-overlap-container {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  width: 100%;
}
.image-overlap-container .img-c {
  grid-row: 1;
  margin: 0;
}
.image-overlap-container .img-fluid {
  width: 100%;
}

/* 1枚目
-------------------------- */
.image-overlap-container .img-back {
  margin-top: 10px !important;
  grid-column: 2 / 9 !important;
  transform: scale(1.2);
}
@media print, screen and (min-width: 768px) {
.image-overlap-container .img-back {
  margin-top: 0 !important;
  grid-column: 1 / 8 !important;
  transform: scale(1.2);
  }
}

/* 2枚目
-------------------------- */
.image-overlap-container .img-front {
  margin-top: 60px;  
  grid-column: 6 / 13; 
  z-index: 2;
}
@media print, screen and (min-width: 768px) {
.image-overlap-container .img-front {
  margin-top: 80px;
  }
}
@media print, screen and (min-width:1600px) {
.image-overlap-container .img-front {
  margin-top: 200px;
  }
}

/* ----------------------------------------------------
  box_message_area
---------------------------------------------------- */
@media only screen and (max-width: 767px) {.box_message {display:none;}}

@media print, screen and (min-width: 768px) {
.box_message_area {
  transition-duration: 300ms;
  position: relative;
  overflow: hidden;
}
.box_message_area div,
.box_message_area p {
  position: relative;
  z-index: 1;
}
.box_message {
  font-size: 50px;  
  left: 0px;
  top: 12%;
  color: #00b0f0; /* 文字色 */
  position: absolute;  
  writing-mode: vertical-lr;
  text-orientation: mixed;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  }
}

@media print, screen and (min-width: 1200px) {
.box_message {
  font-size: 100px;  
  left: 0px;
  top: 5%;
  }
}

@media print, screen and (min-width: 1800px) {
.box_message {
  font-size: 120px;  
  left: 0px;
  top: 5%;
  }
}

/* ----------------------------------------------------
  カタログ
---------------------------------------------------- */
/*  アイテムエリア
---------------------------------------------------- */
.item_ctlg_area {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-bottom: 30px;
}
@media print, screen and (min-width: 768px) {
  .item_ctlg_area {
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 50px;
  }
}

/*  アイテム
---------------------------------------------------- */
.item_ctlg_box {
  background: #f9f9f9;
  padding: 15px;
}

@media print, screen and (min-width: 1200px) {
.item_ctlg_box {
  padding: 20px;
  }
}

/*  写真
---------------------------------------------------- */
.item_ctlg_box .photo-ofi {
  margin-bottom: 8px;
}

/*  newと日付
---------------------------------------------------- */
.item_ctlg_info{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  color: #00b0f0;
}

.item_ctlg_day{
  font-size: 16px;
}

/*  タイトル
---------------------------------------------------- */
.item_ctlg_title{
  margin-bottom: 5px;
	}
@media print, screen and (min-width: 768px) {
.item_ctlg_title{
  margin-bottom: 10px;
	}
}

/* ----------------------------------------------------
  カタログ 2
---------------------------------------------------- */
/*  アイテムエリア
---------------------------------------------------- */
.item_ctlg_area_02 {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-bottom: 30px;
}
/*@media print, screen and (min-width: 768px) {
  .item_ctlg_area_02 {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 30px;
  }
}*/

@media print, screen and (min-width: 1400px) {
.item_ctlg_area_02 {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  margin-bottom: 30px;
  }
}

/*  box
---------------------------------------------------- */
.item_ctlg_box_02{
  padding: 15px;  
  border-radius: 10px;
  background: #fff;
}

@media print, screen and (min-width: 768px) {
.item_ctlg_box_02{
  padding: 30px; 
  }
}

@media print, screen and (min-width: 1600px) {
.item_ctlg_box_02{
  padding: 50px; 
  }
}

/*  写真
---------------------------------------------------- */
.item_ctlg_box_02 .photo-ofi {
  margin-bottom: 8px;
}

/*  newと日付
---------------------------------------------------- */
.item_ctlg_info_02{}

.item_ctlg_day_02{
  font-size: 16px;
  margin-bottom: 3px;
}

/*  タイトル
---------------------------------------------------- */
.item_ctlg_title_02{
  font-size: 18px;
  line-height: 28px;
  margin-bottom:10px;
  padding: 5px 0 5px 10px;
  border-left: 5px solid #00b0f0;
	}
@media print, screen and (min-width: 768px) {
.item_ctlg_title_02{
  font-size: 22px;
  line-height: 32px;  
  margin-bottom: 15px;
	}
}
@media print, screen and (min-width: 1600px) {
.item_ctlg_title_02{
  font-size: 26px;
  line-height: 36px;  
  margin-bottom: 15px;
	}
}


/* ----------------------------------------------------
    背景固定画像
---------------------------------------------------- */
.bg-haikei_01{background: url("../images/bg_haikei_01.jpg") no-repeat center 50%}

@media print, screen and (min-width: 992px) {
.bg-haikei_01{
	background: url("../images/bg_haikei_01.jpg") no-repeat scroll 50% 0% / cover;
	height: auto;
	background-position: 50% 50%;
	background-attachment: fixed;
	}
}

.part-h{padding:80px 0; margin-top: 100px;}
@media print, screen and (min-width: 768px) {.part-h{padding:100px 0}}
@media print, screen and (min-width: 992px) {.part-h{padding:200px 0}}
@media print, screen and (min-width: 1400px) {.part-h{padding:200px 0}}

/* ----------------------------------------------------
  背景固定画像
---------------------------------------------------- */
@media print, screen and (min-width: 768px) {
.bg-haikei_02{
	background: url("../images/bg_haikei_02.jpg");
  background-repeat: no-repeat;
  background-position: left -250px bottom -100px;
	}
}
@media print, screen and (min-width: 992px) {
.bg-haikei_02{
  background-attachment: fixed;  
  background-position: left 0 bottom 0;
	}
}

/* ----------------------------------------------------
  テキスト余白
---------------------------------------------------- */
.room_01{padding:30px 15px; background: #222; transition-duration: 300ms;}
@media print, screen and (min-width: 768px) {.room_01{padding: 60px 80px;}}
@media print, screen and (min-width: 992px) {.room_01{padding: 60px 80px}}
@media print, screen and (min-width:1200px) {.room_01{padding: 60px 80px}}
@media print, screen and (min-width:1400px) {.room_01{padding: 100px 120px}}
@media print, screen and (min-width:1600px) {.room_01{padding: 130px 150px}}

/* ----------------------------------------------------
  アイテムボックス
---------------------------------------------------- */
/* アイテム全体
----------------------------- */
.item_panel{
  background: #fff; /* 任意色 */
  gap: 15px;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  color: #222; /* 任意色 */
}
@media print, screen and (min-width: 992px) {
  .item_panel{
    padding: 30px;
    margin-bottom: 30px;
  }
}

/* アイテム写真
----------------------------- */
.item_panel_photo{
  margin-bottom: 10px;
}

/* タイトル
----------------------------- */
.item_panel_title{
  font-size: 16px;
  line-height: 26px;
}
@media print, screen and (min-width: 992px) {
  .item_panel_title{
    font-size: 18px;
    line-height: 28px;
  }
}

/* ----------------------------------------------------
	   ページング
---------------------------------------------------- */
.part_paging{padding:30px 0 0 0}
@media print, screen and (min-width: 992px) {.part_paging{padding:40px 0 0 0}}

.paging { text-align: center; font-size: 90%;}
.paging span.current,
.paging span.paging-text{
	margin:0px 0.5px;
	color:#333;
	border:2px solid #333;
	zoom:1;
	display:inline-block;
	overflow:hidden;
	text-decoration:none;
	background: #fff;
  border-radius: 5px;  
}
.paging span.paging-text a{
	padding:5px 8.5px;
	display:block;
	color: #333;
}
.paging span.current{
	background: #333;
	border:2px solid #333;
	color:#fff;
	zoom:1;
	padding:5px 8.5px;
	text-decoration:none;
	display:inline-block;
	cursor:pointer;
  border-radius: 5px;
}
.paging span.paging-text a:hover{
	background: #333;
	color:#fff;
	text-decoration:none;
	cursor:pointer;
	opacity: 1;
}

@media print, screen and (min-width: 768px) {
	.paging { font-size: 100%;}
	.paging span.current,
	.paging span.paging-text{margin:0px 2px;}
	.paging span.paging-text a{padding:10px 15px;}
	.paging span.current{padding:10px 15px;}
}


/* ----------------------------------------------------
  テーブル
---------------------------------------------------- */
table{border-spacing:0;border-collapse:separate;}

/* テーブル1
---------------------------------------------------- */
.table1{
  width:100%;
  border-top:0px;
  border-bottom:0px;
  border-collapse:collapse;  
}
.table1 th{
	width: 22%;
	padding:20px 0;
  border: solid #222;
  border-width: 1px 0;  
	vertical-align:middle;
	display:table-cell;
  font-weight: normal;
  background: transparent;
  text-align: center;
  word-break: break-word;
	}
@media print, screen and (min-width: 768px) {
.table1 th{
	width: 25%;
	}
}
.table1 td{
	padding:20px 0 20px 20px;
  border: solid #ccc;
  border-width: 1px 0;
	display:table-cell;
  background: transparent;
  word-break: break-word;
	}
@media only screen and (max-width: 767px) {
.table1 span{
	text-decoration:underline;
	color:#222;
	}
}

/* テーブル5
---------------------------------------------------- */
.table5 {
  width:100%;  
	border-collapse: collapse;
	border-spacing: 0;
  background: #fff;
}
.table5 th,
.table5 td {
	padding:7px 10px;
	border: 1px solid #ccc;
  vertical-align: middle;
}
.table5 th {
  width:30%;
	text-align: center;
  font-weight: normal;
  background: #eee;
}

@media print, screen and (min-width: 768px) {
.table5 th {
  width: 20%;
  }
.table5 th,
.table5 td {
	padding: 10px 15px;
  }  
}

/* ----------------------------------------------------
  block
---------------------------------------------------- */
/*  btn03_in
---------------------------------------------------- */
.btn03_in {
  color: #fff !important;
  background: #00b0f0; /* 任意色 */
  display: inline-block;
  width: 270px;
  padding: 20px 2px;
  border: 0;
  text-align: center;  
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 100px;
}
.btn03_in:visited {
  color: #fff !important;
}
.btn03_in:hover,
.btn03_in:active {
  color: #fff !important;  
  background: #0086b7; /* 任意色 */
  text-decoration: none !important;
}
.btn03_in i {
  font-size: 16px;
  margin: 0 0 0 5px;
  color: #fff;
}

/* ----------------------------------------------------
    見出し03
---------------------------------------------------- */
.midasi03{
	font-size: 21px;
	line-height: 35px;
	}
@media print, screen and (min-width: 992px) {
.midasi03{
	font-size: 26px;
	line-height: 41px;
	}
}
@media print, screen and (min-width: 1200px) {
.midasi03{
	font-size: 28px;
	line-height: 48px;
	}
}

/* ----------------------------------------------------
    見出し05
---------------------------------------------------- */
.midasi05{
	font-size: 18px;
  line-height: 28px;  
  padding:8px 15px;
  background: #222;
  color: #fff;
}
@media print, screen and (min-width: 992px) {
.midasi05{
	font-size: 20px;
  line-height: 30px;  
  padding:10px 17px;
  }
}

/* ----------------------------------------------------
    見出し05
---------------------------------------------------- */
.midasi05_b{
	font-size: 18px;
  line-height: 28px;  
  padding:8px 15px;
  background: #00b0f0;
  color: #fff;
}
@media print, screen and (min-width: 992px) {
.midasi05_b{
	font-size: 20px;
  line-height: 30px;  
  padding:10px 17px;
  }
}

/* ----------------------------------------------------
    見出し06
---------------------------------------------------- */
.midasi06{
	font-size: 23px;
  line-height: 23px;
}
@media print, screen and (min-width: 992px) {
.midasi06{
	font-size: 25px;
  line-height: 35px;
	}
}

/* ----------------------------------------------------
    見出し07
---------------------------------------------------- */
.midasi07{
	font-size:43px;
	line-height:40px;
	letter-spacing: 3px;
	}
@media print, screen and (min-width: 768px) {
.midasi07{
	font-size: 50px;
	line-height: 50px;
	letter-spacing: 5px;  
	}
}
@media print, screen and (min-width: 1200px) {
.midasi07{
	font-size: 55px;
	line-height: 55px;
	}
}
@media print, screen and (min-width: 1400px) {
.midasi07{
	font-size: 70px;
	line-height: 70px;
	}
}

/* ----------------------------------------------------
  ★★★レイアウト（1:1）
---------------------------------------------------- */
.note_11 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  box-sizing: border-box;  
  align-items: center;
  justify-items: center;
}
@media screen and (min-width: 768px) {
  .note_11 {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}
@media screen and (min-width: 992px) {
  .note_11 {
    gap: 50px;
  }
}
@media screen and (min-width: 1200px) {
  .note_11 {
    gap: 80px;
  }
}
@media screen and (min-width: 1600px) {
  .note_11 {
    gap: 100px;
  }
}
.note_11:last-child { margin-bottom: 0;}
.note_11_box  {
  box-sizing: border-box;
  width: 100%;
}

/* ----------------------------------------------------
  ★★★レイアウト（2:1）
---------------------------------------------------- */
.note_21 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  box-sizing: border-box;  
  align-items: center;
  justify-items: center;
}
@media screen and (min-width: 768px) {
.note_21 {
    grid-template-columns: 2fr 1fr;
    gap: 40px;
  }
}
@media screen and (min-width: 992px) {
.note_21 {
    gap: 50px;
  }
}
@media screen and (min-width: 1200px) {
.note_21 {
    gap: 80px;
  }
}
@media screen and (min-width: 1600px) {
.note_21 {
    gap: 100px;
  }
}
.note_21:last-child { margin-bottom: 0;}
.note_21_box  {
  box-sizing: border-box;
  width: 100%;
}

/* ----------------------------------------------------
  ★★★レイアウト（3:1）
---------------------------------------------------- */
.note_31 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  box-sizing: border-box;  
  align-items: center;
  justify-items: center;
}
@media screen and (min-width: 768px) {
.note_31 {
    grid-template-columns: 3fr 1fr;
    gap: 40px;
  }
}
@media screen and (min-width: 992px) {
.note_31 {
    gap: 50px;
  }
}
@media screen and (min-width: 1200px) {
.note_13 {
    gap: 60px;
  }
}
@media screen and (min-width: 1600px) {
.note_31 {
    gap: 80px;
  }
}
.note_31:last-child { margin-bottom: 0;}
.note_31_box {box-sizing: border-box;}