@import url("reset.css");

.fix-contact{
    width: 252px;
    height: 98px;
    background-image: url(/image/common/contact_bg.svg);
    position: fixed !important;
    bottom: 0;
    right: 0;
    z-index: 100;
    z-index: 100;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    color: #fff;
    padding: 18px 0 0 18px;
}
.fix-contact p{
    background-image: url(/image/common/mail_icon.svg);
        background-repeat: no-repeat;
    padding: 4px 0 4px 34px;
    background-position: left 2px;
}
.fix-contact:hover{
    opacity: 0.8;
}

/* --- ボタンの設定 --- */
.hamburger {
    position: fixed;
    top: 0;
    right: 0;
    width: 80px; /* 少し大きめにすると押しやすいです */
    height: 80px;
    background-color: #FFB8B8; /* ボタン自体の背景をピンクに */
    border: none;

    cursor: pointer;
    z-index: 200;
    
    /* 中の線を中央に寄せるための調整 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 三本線の共通スタイル */
.hamburger span {
    display: block;
    position: absolute;
    width: 30px; /* 線の長さ */
    height: 1px;
    background-color: #fff; /* ピンク背景なら白、または #555 など */
    transition: all 0.4s ease;
}

/* 線の位置微調整 */
.hamburger span:nth-child(1) { transform: translateY(-10px); }
.hamburger span:nth-child(2) { transform: translateY(0); }
.hamburger span:nth-child(3) { transform: translateY(10px); }



.hamburger.active span:nth-child(1) { transform: translateY(0) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(0) rotate(-45deg); }
/* --- メニューの設定 --- */
.nav-menu {
    position: fixed;
    top: 0;
    right: -50%; /* 幅と同じ分だけ右に隠す */
    width: 50%;   /* 仕様：幅50% */
    height: 100%; /* 仕様：高さ100% */
    background-color: #FFB8B8;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    z-index: 150;
    transition: right 0.5s ease; /* スライドアニメーション */
    
    display: flex;
    justify-content: center;
  
    flex-flow: column;
    padding: 0 0 0 100px;
}

/* メニュー展開時（JavaScriptで付与） */
.nav-menu.active {
    right: 0;
}
.nav-menu a:hover{

    opacity: 0.8;
}
/* リストの装飾 */
.nav-list {
    list-style: none;
    padding: 0;
    font-size: 18px;
}

.nav-list li {
    margin: 25px 0;
}

.nav-list li a {
    text-decoration: none;
    color: #fff;
    letter-spacing: 0.1em;
}
.sns{
    display: flex;
    list-style: none;
        margin: 20px 0 0 0;
}
.sns li{
    margin-right: 10px;
}
.title{
    text-align: center;
    display: flex;
    flex-direction: column-reverse;
}
.title h2{
font-size: 18px;
font-weight: bold;
}
.title h3{
    font-family: 'KudryashevDisplaySans', sans-serif;
    font-size: 48px;
    background-image: url(/image/common/title_bg.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    padding: 0 0 20px 0;
    margin: 0 0 12px 0;
}
footer{
    background-color: #FFCFBF;
    padding: 100px 0 10px 0;
    position: relative;
}
.footer-contents{
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    padding: 0 20px;
}
.footer-contents .info{
    /*width: 30%;*/
}
.footer-contents h2{
font-family: 'KudryashevDisplaySans', sans-serif;
font-size: 26px;
margin-bottom: 6px;
}
.footer-contents p{
    line-height: 2;
    font-size: 12px;
}
.footer-menu{
    display: flex;
    flex-wrap: wrap;
    align-self: flex-start;
    column-gap: 60px; /* 横の間隔だけ */
  row-gap: 0px;
font-size: 14px;
  /*width: 68%;*/
}
.footer-menu li{
margin-bottom: 30px;
}
.footer-menu a{
    text-decoration: none;
    color: #000;
}
.footer-menu a:hover{
    opacity: 0.8;
}
.copyright{
    text-align: center;
    font-size: 10px;
    margin: 100px 0 0;
}
.back-top {
  /* 円の土台 */
  display: block;
  width: 50px;
  height: 50px;
  background-color: #FFCFBF; /* お好みの色に */
  border-radius: 50%;     /* 正円にする */
  position: relative;
  transition: opacity 0.3s;
  cursor: pointer;
      position: absolute;
    top: -20px;
    right: 50px;
}

.back-top::before {
  /* 矢印の先端部分 */
  content: "";
  position: absolute;
  top: 58%;               /* 中央より少し下げるとバランスが良い */
  left: 50%;
  width: 16px;            /* 矢印のサイズ */
  height: 16px;           /* 矢印のサイズ */
  border-top: 1px solid #fff;  /* 矢印の線の太さと色 */
  border-left: 1px solid #fff; /* 矢印の線の太さと色 */
  transform: translate(-50%, -50%) rotate(45deg); /* 45度回転させて上に向け、中央配置 */
}
#main-image{
    width: 100%;
    height: 400px;
    margin: 0 0 150px;
}
#main-image img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.midashi{
    text-align: center;
    line-height: 2;
    margin: 80px 0;
}
.btn2 {
    /* 1. 形とサイズ */
    display: flex;
    justify-content: center; /* 左右中央 */
    align-items: center;     /* 上下中央 */
    width: 300px;            /* 任意の幅 */
    height: 60px;           /* 任意の高さ */

    /* 2. 両端を円にする魔法 */
    border-radius: 30px;    /* 高さの半分の値を指定。または 999px でもOK */
background-color: #DD8F9E;
    color: #fff;
    text-decoration: none;
 
    border: none;
    cursor: pointer;
    transition: 0.3s;
    margin: 0 auto;
    
}
#ignore-mouse {
    pointer-events: none;
}
.menu-point{
	cursor:pointer;
}
.elementor-widget-image:hover,
.elementor-widget-image *:hover {
    cursor: pointer !important;
}
@media screen and (max-width: 469px){
    #main-image {
    width: 100%;
    height: 200px;
    margin: 0 0 100px;
}
    .title h3{
    font-size: 30px;
}
.title h2{
    font-size: 16px;
}
.nav-menu{
    width: 100%;
    right: -100%;
    padding: 30px;
    text-align: center;
}
.sns{
    justify-content: center;
}

.fix-contact{
    width: 100%;
        height: auto;

        padding-bottom: env(safe-area-inset-bottom);
        background-color: #FFB8B8;
        padding: 18px 0 0 0;
}

.footer-contents{
    display: block;
    padding: 0 20px;
}
.footer-contents .info {
    width: 100%;
    text-align: center;
}
.footer-menu{
    display: none;
}
.nav-list {
    font-size: 16px;
}
/* メニューが閉じているときは、背景や枠組みを完全に消滅させる */
.elementor-nav-menu--main:not(.elementor-active),
.elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu--main {
    display: none !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    top: -9999px !important; /* 画面外へ飛ばす */
}

/* 開いた時だけ正常に表示させる */
.elementor-nav-menu--main.elementor-active {
    display: block !important;
    height: 100dvh !important;
    top: 0 !important;
}
}