@charset "UTF-8";
/*
    Template: swell
    Theme Name: HOUUNJI
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

@import url("css/top.css");
@import url("css/page.css");


.cf:before,.cf:after{content:"";display:block;overflow:hidden;}
.cf:after{clear:both;}
.cf{zoom:1;}

body{
    background-image: url(img/bd_bg.jpg);
}
#body_wrap{
    background-image: url(img/triangle-left-top.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 20% auto;
}
#main_visual {
  position: relative;
}

#main_visual::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 350px;              /* 幅を指定 */
  max-width: 30%;           /* 最大幅を指定 */
  height: 350px;             /* 高さも必要に応じて指定 */
  background: url('img/triangle-left-top.png') no-repeat left top;
  background-size: contain;  /* 画像サイズを要素内に合わせる */
  z-index: 1;
  pointer-events: none;
}
.l-header{position: absolute!important; top:20px;}
.l-header__inner{background: #fff;}
.l-fixHeader{background: #fff;}
.l-footer__foot .c-headLogo{display: none;}
.top #content{padding-top: 0!important; margin-bottom: 0!important;}
.c-gnav > .menu-item > a .ttl {font-size: 16px;}
.p-postList__meta, .p-postList__times{display: inline-block; margin-right: 10px;}
.p-postList__title{display: inline-block!important; margin-left: 10px!important; font-weight: 500!important;}

.l-footer__foot .l-container{
    display: flex;
    justify-content: space-between; /* 左右端に配置 */
    align-items: center;
}

@media (max-width: 1200px) {
  .c-gnav > .menu-item > a {padding: 0 20px;}
}


@media (min-width: 960px) {
    .-series-right .l-header__inner,.l-fixHeader__inner{background: #fff; border-radius: 50px; width: 90%; margin: auto;}
}
@media (min-width:600px){
.l-content {padding-top: 10em; margin-bottom: 0!important}    
.l-footer__nav li:first-child a{border-left:none;}
.l-footer__nav li:last-child a{border-right: none;}
}

.l-container{max-width: none!important;}

/*triangle ornament*/
.top-right-traiangle{position: absolute; top:-300px; right:0;z-index: 2;max-width: 640px; width: 50%;}
.page-right-traiangle{position: absolute; top:280px; right:0;z-index: 2;max-width: 640px; width: 35%;}
.top-right-traiangle img,.page-right-traiangle img{width: 100%; height: auto;}

@media screen and (min-width:641px) and (max-width:1024px){
	.l-header[data-spfix="1"]{top: auto; position: fixed!important;}  
     .l-content {padding-top: 8em;  }
    
    .p-spMenu__body{
        background-image: url(img/ornament03-1.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100% auto;        
    }
    .p-spMenu__inner::before {background: #282748;}
    .p-spMenu__closeBtn .c-iconBtn__icon {color: #fff;}
    .c-widget__title.-spmenu{
        font-family: "Dancing Script", cursive; 
        font-size: 23px; 
        color: #fff; 
        background: none; 
        margin-bottom: 0.5em; 
        letter-spacing: 0.1em; 
        text-align: center;
    }
    .c-listMenu a{color: #fff; padding: 1.2em 1em 1.2em 1.5em;}
    .c-listMenu a::before{top: 53%;}
    .c-listMenu .sub-menu a::before{content: "-"!important;}
    
    #fix_bottom_menu::before {background: #282748; opacity: 0.9;}
    #fix_bottom_menu .menu_list{height: 60px; padding: 0;}
    #fix_bottom_menu .menu-item{border-right: 1px solid #fff; height: 100%;}
    #fix_bottom_menu .menu-item:last-child{border: none;}
    #fix_bottom_menu .menu-item a{color: #fff; padding-top: 10px;}
    #fix_bottom_menu span{margin-top: 6px;}
}

@media screen and (max-width: 640px) {
    #body_wrap{background-size: 30% auto;}    
    .wp-block-group__inner-container{margin: 0 3%;}
    .top-right-traiangle{top:-250px;}  
    .page-right-traiangle{top:150px;}
    .l-mainContent__inner{padding-top: 5.5em;}
    .l-mainContent__inner > .post_content{margin: 2em 0 4em;}
    .l-content{margin-bottom: 0!important;}
    .l-header[data-spfix="1"]{top: auto; position: fixed!important;}
    
    .p-spMenu__body{
        background-repeat: no-repeat; 
        background-position: center bottom; 
        background-size: 100% auto; 
        background-image: url(img/ornament03-1.png);
    }
    .p-spMenu__inner::before {background: #282748;}
    .p-spMenu__closeBtn .c-iconBtn__icon {color: #fff;}
    .c-widget__title.-spmenu{
        font-family: "Dancing Script", cursive; 
        font-size: 23px; 
        color: #fff; 
        background: none; 
        margin-bottom: 0.5em; 
        letter-spacing: 0.1em; 
        text-align: center;
    }

    .c-listMenu a{color: #fff; padding: 1.2em 1em 1.2em 1.5em;}
    .c-listMenu a::before{top: 53%;}
    .c-listMenu .sub-menu a::before{content: "-"!important;}
    
    
    
    .l-footer__foot .l-container{display: block;}
    .l-footer__nav li a{border-right: 1px solid #333; padding: .25em 1.5em;}
    .l-footer__nav li:last-child a{border-right: none;}
    
    #fix_bottom_menu::before {background: #282748; opacity: 0.9;}
    #fix_bottom_menu .menu_list{height: 60px; padding: 0;}
    #fix_bottom_menu .menu-item{border-right: 1px solid #fff; height: 100%;}
    #fix_bottom_menu .menu-item:last-child{border: none;}
    #fix_bottom_menu .menu-item a{color: #fff; padding-top: 10px;}
    #fix_bottom_menu span{margin-top: 6px; font-size: 14px;}
    
    body .lum-lightbox-inner img {
    max-width: 100% !important; /* 画像の最大幅を画面の90%に制限（必要に応じて調整） */
    max-height: 80vh !important; /* 画像の最大高さをビューポートの80%に制限（必要に応じて調整） */
    object-fit: contain; /* 画像がコンテナ内に収まるように調整 */
}
}

/*==================================================
 ページタイトル
===================================*/
h1.c-pageTitle{text-align: center!important; border-bottom: none!important;}
h1.c-pageTitle .c-pageTitle__inner{float: none!important; border-bottom: none!important; font-weight: 500; font-size: clamp(30px,3.0vw,46px);}

.bg01{
    background-repeat: repeat;
    background-image: url(img/bg01.png);
    background-color: #177A9A!important;
}

@media screen and (max-width: 640px) {
    h1.c-pageTitle .c-pageTitle__inner {font-size: 26px;}
}

/*==================================================
 font
===================================*/
/*font*/
.Dancing{font-family: "Dancing Script", cursive;}
.Noto-Sans{font-family: "Noto Sans JP", serif;}
/*size*/
.fz30{font-size: clamp(24px,2.4vw,30px)!important;}
.fz40{font-size: clamp(34px,3.4vw,40px)!important;}
.fz50{font-size: clamp(40px,4.0vw,50px)!important;}
/*color*/
.fc-w{color: #fff;}


.linehight2{line-height: 2.0em;}

.z-index3{z-index: 3; position: relative;}

/*ttl-style*/
.eg-style{font-size: clamp(24px,2.4vw,30px); line-height: 1.2em; letter-spacing: 0.05em; margin-left: 5px;}
h2.noto-serif{font-weight: 400; margin-top: 0!important;}


@media screen and (max-width: 640px) {
    .fz40 {font-size: 27px !important;}
}


/*==================================================
 footer contact
===================================*/
.f-contact{
    position: relative;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    background-image: url(img/ornament03-1.png);
    background-color: #282748;
    padding: 80px 5% 100px;
    text-align: center;
    color: #fff;
    z-index: 10;
}
.f-contact .comment{padding:20px 0;}
.f-contact .tel a{color: inherit; text-decoration: none; pointer-events: none; cursor: default;}

@media screen and (max-width: 640px) {
    .f-contact .tel a{pointer-events: auto; cursor: pointer;}
}


/*==================================================
btn
===================================*/
.btnBox-center{max-width: 300px; width: 85%; margin:30px auto;}
.btnBox-center02{max-width: 300px; width: 75%; margin:5px auto;}
.btnBox-left{max-width: 300px; width: 85%; margin:30px 0;}
a.btn-white {
  border: solid 1px #fff;
  color: #fff;
  background: transparent;    
}
/* 背景アニメーション用 */
a.btn-white::before {
  background: linear-gradient(to right, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 100%);
}

a.btn-black {
  border: solid 1px #333;
  background: #333;
  color: #fff;    
}
/* 背景アニメーション用 */
a.btn-black::before {
  background: linear-gradient(to right, #000 0%, #000 100%);
}
a.btn-black02 {
  border: solid 1px #333;
  color: #333;
  background: transparent;    
}
/* 背景アニメーション用 */
a.btn-black02::before {
  background: linear-gradient(to right, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 100%);
}
a.btn-blue {
  border: solid 1px #282748;
  background: #282748;
  color: #fff;    
}
/* 背景アニメーション用 */
a.btn-blue::before {
  background: linear-gradient(to right, #000 0%, #000 100%);
}

@media screen and (min-width:641px) and (max-width:1024px){
    .btnBox-center02{width: 90%;}
}
@media screen and (max-width: 640px) {
    .btnBox-left{margin: 30px auto;}
    .btnBox-center02{width: 95%;}
}


/*==================================================
btn 共通　
===================================*/
a.btn, a.btn02{
  position: relative;
  border-radius: 50px;
  text-decoration: none;
  width: 100%;
  padding: 12px 3%;
  text-align: center;
  display: block;
  overflow: hidden; /* ← 疑似要素の背景用 */
  z-index: 1;   
}
a.btn02{
    padding: 3px 3%;
    font-size: 13px;
}

/* 背景アニメーション用 */
a.btn::before, a.btn02::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  transform: scaleX(0);
  transform-origin: left;
  z-index: 0;
  transition: transform 0.5s cubic-bezier(.4,0,.2,1);
  border-radius: 50px;
}

/* 矢印 */
a.btn::after, a.btn02::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f105";
  margin-left: 1.5em;
  display: inline-block;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  transform: translateX(0);
  position: relative;
  z-index: 1;
}
/* テキストを前面に */
a.btn span.moji, a.btn02 span.moji {
  position: relative;
  z-index: 1;
}
/* ホバー時 */
a.btn:hover::before, a.btn02:hover::before {
  transform: scaleX(1);
}
/* ホバー時の矢印移動 */
a.btn:hover::after, a.btn02:hover::after {
  transform: translateX(1em);
}




.page-photo {
    width: 100%;
    height: 500px; /* PCサイズ */
    overflow: hidden;
    position: relative;
}
.page-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/*.page-photo::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    background-image: radial-gradient(#282748 1px, transparent 1px);
    background-size: 3px 3px;
    opacity: 0.3;
    z-index: 1;
    height:500px!important;
    visibility: visible !important;/*無効に
}/*

/* スマホ表示の高さを下げる */
@media (max-width: 640px) {
    .page-photo {height: 180px;}
    /*.page-photo::after {height: 180px;}*/
}