/* all page */
/*fonts*/
@import url('https://fonts.googleapis.com/css2?family=Yomogi&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');
:root{
	--color1: #d64140;
	--color2: #f2632a;
	--color3: #ef9d26;
	--color4: #f7dda9;
	--color5: #ebe6df;
	--font-jp: 'Zen Kaku Gothic New', 'Noto Sans JP', "游ゴシック Medium", sans-serif;
	--font-jp2: 'Yomogi', cursive
}
header .pc_nav li a span:nth-of-type(2), #sp_nav .sp_nav_inner .l-menu ul li a, #con1 .topTxt1, #con1 h2, #con2 > div p:nth-of-type(1), #con3 .title .en, #con3 .box .txt_title, #con3 .box h3, .footer_contact p, .f_sitemap_inner li a, .footer p, footer .copy, #page_title, .cate_list li a, .cate_list li .cate_no, .cate_title, .sub_cate_title, .box_title, .box_title1, .pagetitle p, .pager li a, .footer_contact .f_contact_box h4 {font-family: var(--font-jp);}
#con2 > div p:nth-of-type(1), #con3 .title .en{font-family: var(--font-jp2);}

/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #160a0a;text-decoration: underline;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}

.txt_color1, .hvr_txt_color1:hover{color: var(--color1);}
.txt_color2, .hvr_txt_color2:hover{color: var(--color2);}
.txt_color3, .hvr_txt_color3:hover{color: var(--color3);}
/*.txt_color4, .hvr_txt_color4:hover{color: #c9baa9}*/

/* background-color */
.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1);}
.bg_color2, .hvr_bg_color2:hover{background-color: var(--color2);}
.bg_color3, .hvr_bg_color3:hover{background-color: var(--color3);}
.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4);}
.bg_color5, .hvr_bg_color5:hover{background-color: var(--color5);}

/* border-color ※!important */
.border_color1, .hvr_border_color1:hover{border-color: var(--color1);}
.border_color2, .hvr_border_color2:hover{border-color: var(--color2);}
.border_color3, .hvr_border_color3:hover{border-color: var(--color3);}
/*.border_color4, .hvr_border_color4:hover{border-color: #c9baa9}*/

#fakeloader .fl {max-width: 200px;}

.banner_fixed {
    position: fixed;
    bottom: 40px;
    right: 100px;
    z-index: 5;
	-webkit-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
    max-width: 230px;
}
.banner_fixed a:hover{
    opacity: 0.7;
}
/* header */


/* footer */
.footer_contact .f_contact_box h4{margin-bottom: 20px;}
.footer > p{text-align: center;}

.pagetop {z-index: 2;}

/* top ----------------------------------------------------------------*/

/* main img */
#main_img{
    padding: 0 15%;
    padding-top: 100px;
    padding-bottom: 100px;
}
#main_img .catch{
    bottom: 5%;
    left: 2%;
    width: 60%;
    max-width: 1000px;
}
#main_img .main_l{
    top: 10%;
    left: 1%;
    width: 25%;
    max-width: 400px;
}
#main_img .main_r {
    top: 20%;
    right: 1%;
    width: 26%;
    max-width: 410px;
}

/* main */

/* intro */
.topTxt1 .arrow {
    margin-left: 0;
    transform: translateX(-50%);
}
#con2 .topimg2, #con2 .topimg3 {
    filter: drop-shadow(8px 8px 0px #f7dda9);
}
#con1 h2 br{display: none;}

/*▼アコーディオン▼*/
.grad-wrap {
  position: relative;
}
.grad-wrap + .grad-wrap {
  margin-top: 40px;
}
.grad-trigger {
  z-index: 4;
    position: absolute;
    right: 0;
    bottom: 10px;
    left: 0;
    width: 150px;
    margin: auto;
    padding: 0;
	border: 1px solid #000;
    border-radius: 2px;
    background: #fff;
    color: #121212;
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
    transition: .5s ease;
    box-shadow: 0 0 3px rgb(0 0 0 / 30%);
	font-family: "Libre Baskerville";
}
.grad-trigger::after {
  content: "MORE"; /*クリック前のボタンのラベル*/
	  font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.grad-trigger .fa {
  margin-right: .5em;
}
.grad-item {
  position: relative;
  overflow: hidden;
}
.grad-item.is-hide {
  height: 150px; /*隠した後の高さ*/
	z-index: 3;
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 150px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(235,230,223,0) 30%, rgba(235,230,223,0.9) 50%, rgba(235,230,223,1) 90%, #ebe6df 100%);
  background: -ms-linear-gradient(top, rgba(235,230,223,0) 30%, rgba(235,230,223,0.9) 50%, rgba(235,230,223,1) 90%, #ebe6df 100%);
  background: linear-gradient(top, rgba(235,230,223,0) 30%, rgba(235,230,223,0.9) 50%, rgba(235,230,223,1) 90%, #ebe6df 100%);
	z-index: 3;
}
.grad-trigger.is-show {
  bottom: -3em;
}
.grad-trigger.is-show::after {
  content: "CLOSE" /*クリック後にボタンのラベルを変える*/
}
.grad-trigger.is-show + .grad-item::before {
  display: none;
}
/*▲アコーディオン▲*/


/* contents */
.con1_squ {z-index: 2;}
#con3 .title{
    position: relative;
    z-index: 2;
}
#con3 .modal_img img {border-radius: 30px;}
#con3 .title .en br {display: none;}

#con3 .title .en {
    font-size: 50px;
    color: #f57f40;
    font-weight: bold;
}
html.modalset{
	overflow: hidden;
}
#con3 .box_item {
    cursor: pointer;
    background: var(--color1);
    background-repeat: no-repeat;
    background-size: 60% 60%;
    border-radius: 30px;
}
#con3 .box_item figure{
    border-radius: 100%;
}
#con3 .box_item:hover {
    transform: scale(1.02);
    filter: drop-shadow(5px 5px 0px var(--color3));
}
#con3 .plus {
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 45px;
}
#con3 .box_title2, #con3 .box_txt1{
    border-top: 1px solid #edede6;
}
#con3 .modal .box_title2{
	border-top: none;
}
#con3 .modal{
	display: none;
	width: 100%;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	line-height: 1.7;
}
#con3 .modal-wrap {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 20px;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	overflow: -moz-scrollbars-none;
}
#con3 .modal-wrap::-webkit-scrollbar {
	display: none;
}
#con3 .modal-wrap:after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 1px;
	height: 100%;
}
#con3 .modal-bg{
	position: absolute;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.3);
	width: 100%;
	height: 100%;
}
#con3 .modal-box {
    width: 90%;
    max-width: 900px;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding: 10px;
    padding-bottom: 23px;
    background-color: #fff;
}
#con3 .modal-box .inner{
	max-height: 650px;
    overflow: auto;
	-ms-overflow-style: none;
}
#con3 .modal-box .inner::-webkit-scrollbar {
  width: 2px;
  height: 10px;
}
#con3 .modal-box .inner::-webkit-scrollbar-track {
  border-radius: 5px;
  box-shadow: 0 0 4px #aaa inset;
}
#con3 .modal-box .inner::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #333;
}
#con3 .modal-box .modal-close {
    cursor: pointer;
    position: absolute;
    top: -20px;
    right: -20px;
    width: 60px;
}
#con3 .modal_img{
    max-width: 600px;
}
#con3 .modal_title1{
	padding-top: 60px;
}
#con3 .modal_title1:before{
	content: "";
	display: block;
	background-color: #666; 
	width: 1px;
	height: 50px;
	position: absolute;
	top: 0;
	left: 2px;
}
#con3 .modal_title1 span{
	transform: rotate(90deg);
	display: block;
	line-height: 1;
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#con3 .modal-box .modal-close {
    top: 15px;
    right: 10px;
    width: 40px;
    z-index: 3;
}
#con3 .modal-box .inner{
    max-height: 500px;
}
}

/* topcms */


/* under page ----------------------------------------------------------------*/
.pagetitle {
    padding-top: 200px;
    padding-bottom: 80px;
    background-color: #fff;
}
.pagetitle_img{
    background-repeat: no-repeat;
    background-size: cover;
    mix-blend-mode: unset;
    opacity: 0.45;
}
.pagetitle h2 {
    color: var(--color1);
    font-weight: bold;
}
.pagetitle p {
    font-weight: bold;
    color: var(--color2);
}
.cate_list li a:hover{
    background-color: var(--color3);
    border: 1px solid var(--color3);
    color: #fff;
}
.cate_list li a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px;
    font-weight: bold;
}

/* cms1 */
.pager li a{font-weight: bold;}

/* cms2 */

/* cms3 */

/* cms4 */

/* cms5 */

/* page7 */

/* page8 */

/* page9 */

/* page10 */


/* ---------- 1536px ---------- */
@media screen and (max-width: 1536px){}
/* ---------- 1366px ---------- */
@media screen and (max-width: 1366px){}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#main_img .main_l {
    top: 20%;
    width: 23%;
}
#main_img .main_r {
    width: 22%;
}
#main_img .catch {
    bottom: 1%;
    width: 70%;
}

}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.banner_fixed {
    max-width: 200px;
    bottom: 10px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}
#main_img {
    padding: 0 5%;
    padding-top: 100px;
    padding-bottom: 100px;
}
#main_img .main_l {
    top: 11%;
    width: 30%;
}
#main_img .main_r {
    top: auto;
    bottom: 15%;
    width: 30%;
}
#main_img .catch {
    bottom: 0;
    width: 90%;
    left: 1%;
}
#con1 h2 br{display: block;}
#con3 .title .en {font-size: 35px;}
#con3 .title .en br {display: block;}
.footer_contact .f_contact_box h4 {font-size: 40px;}
.pagetitle {
    padding-top: 120px;
    padding-bottom: 80px;
}

}