@charset "utf-8";
/* フォントファミリー */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');
/* アイコンインポート */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@font-face {
  font-family: 'YuMinchoNumbers';
  src: local("游明朝体");
  unicode-range: U+30-39; /* 0〜9の数字だけ適用 */
}

body {
	font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
	background-color: #FCFCFC;
}
.english-font {
    font-family: 'YuMinchoNumbers', "Cormorant Garamond" !important;
}
p, li, table, button, form{
    font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.bg-mapkawaii-header {
	background-color: #F7FFF7;
	background-image: -webkit-linear-gradient(330deg,rgba(255,255,255,1.00) 32.74%,rgba(192,238,207,1.00) 100%);
	background-image: -moz-linear-gradient(330deg,rgba(255,255,255,1.00) 32.74%,rgba(192,238,207,1.00) 100%);
	background-image: -o-linear-gradient(330deg,rgba(255,255,255,1.00) 32.74%,rgba(192,238,207,1.00) 100%);
	background-image: linear-gradient(120deg,rgba(255,255,255,1.00) 32.74%,rgba(192,238,207,1.00) 100%);
}
.display-p{
	font-size: 15px;
	font-weight: normal;
}
.card-body ul{
	padding-top: 0.1em;
	margin-bottom: 0.5em;
}
.card-body li{
	line-height: 1.5em;
	padding-bottom: 1em;
	color: rgba(34,63,136,1.00);
}
.navbar-brand  {
	font-weight: bold;
	color: #0A4900;
	text-shadow: -0.1em -0.1em 0.1em #FFFFFF;
}

    .jumbotron {
	background-size: cover;
	background-position: 0% 80%;
	text-shadow: -0.1em -0.1em 0.2em #FFFFFF,0.1em 0.1em 0.2em #FFFFFF,-0.1em 0.1em 0.2em #FFFFFF,0.1em -0.1em 0.2em #FFFFFF,0px -0.1em 0.2em #FFFFFF,0px 0.1em 0.2em #FFFFFF,-0.1em 0px 0.2em #FFFFFF,0px -0.1em 0.2em #FFFFFF,-0.1em -0.1em 0.2em #FFFFFF,0.1em 0.1em 0.2em #FFFFFF,-0.1em 0.1em 0.2em #FFFFFF,0.1em -0.1em 0.2em #FFFFFF;
	background-color: rgba(229,242,244,1.00);
}
/* 毎月背景を変える */
.background-0 .jumbotron{background-image: url(../index/motherdress-slide02.jpg);}
.background-1 .jumbotron{background-image: url(../index/motherdress-slide02.jpg);}
.background-2 .jumbotron{background-image: url(../index/motherdress-slide02.jpg);}
.background-3 .jumbotron {
	background-image: url(../index/motherdress-slide02.jpg);
}
.background-4 .jumbotron {
	background-image: url(../index/motherdress-slide02.jpg);
}
.background-5 .jumbotron{background-image: url(../index/motherdress-slide02.jpg);}
.background-6 .jumbotron{background-image: url(../index/motherdress-slide02.jpg);}
.background-7 .jumbotron{background-image: url(../index/motherdress-slide02.jpg);}
.background-8 .jumbotron{background-image: url(../index/motherdress-slide02.jpg);}
.background-9 .jumbotron{background-image: url(../index/motherdress-slide02.jpg);}
.background-10 .jumbotron{background-image: url(../index/motherdress-slide02.jpg);}
.background-11 .jumbotron{background-image: url(../index/motherdress-slide02.jpg);}

    .jumbotron.jumbotron-fluid.text-center p {
	max-width: 500px;
	padding-left: 1em;
	padding-right: 1em;
	margin-left: auto;
	margin-right: auto;
}
    .card {
	margin-bottom: 1em;
}
    .card1 {	margin-bottom: 1em;
}
.positionrerative {
    position: relative;
}

.dropdown-toggle {
	margin-top: 15px;
	background-color: rgba(255,255,255,1.00);
	-webkit-box-shadow: 2px 2px 5px rgba(225,225,225,1.00);
	box-shadow: 2px 2px 5px rgba(225,225,225,1.00);
	border-radius: 4px;
	padding-left: 1em;
}
#footerbg {
	background-image: -webkit-linear-gradient(88deg,rgba(249,255,249,1.00) 0%,rgba(238,255,240,1.00) 100%);
	background-image: -moz-linear-gradient(88deg,rgba(249,255,249,1.00) 0%,rgba(238,255,240,1.00) 100%);
	background-image: -o-linear-gradient(88deg,rgba(249,255,249,1.00) 0%,rgba(238,255,240,1.00) 100%);
	background-image: linear-gradient(2deg,rgba(249,255,249,1.00) 0%,rgba(238,255,240,1.00) 100.00%);
	background-position: 50% 64%;
	background-size: cover;
	text-shadow: 0px 0px 10px #ffffff,0px 0px 10px #ffffff,0px 0px 10px #ffffff,0px 0px 10px #ffffff,0px 0px 10px #ffffff;
	color: rgba(73,104,65,1.00);
}
#footerbg a{
	color: #526052;
	text-decoration: none;
	border-bottom: 1px dotted #A7C0A3;
}
#footerbg h5{
	font-size: 16px;
}
#footerbg p{
	font-size: 14px;
}
#mapmain-background{
	background-image: -webkit-linear-gradient(270deg,rgba(247,247,247,1.00) 0%,rgba(255,255,255,1.00) 54.72%,rgba(249,249,249,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(247,247,247,1.00) 0%,rgba(255,255,255,1.00) 54.72%,rgba(249,249,249,1.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(247,247,247,1.00) 0%,rgba(255,255,255,1.00) 54.72%,rgba(249,249,249,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(247,247,247,1.00) 0%,rgba(255,255,255,1.00) 54.72%,rgba(249,249,249,1.00) 100%);
}
#mapmain { /* メインマップ 色補正 */
}

#map-main { /* メインマップ サイズ感 */
	position: relative;
	touch-action: auto;
}

.responsive,.autoslider,.autoslider2 { /*# slickスライダー余白消す */
  overflow: hidden;
}
.autoslider .sliderArea,.autoslider2 .sliderArea { /*# slickスライダー */
  width: 100%;
  margin: 0 auto;
  padding: 0 25px;
}
.autoslider .sliderArea.w300,.autoslider2 .sliderArea.w300 {
  max-width: 300px;
}
.autoslider img,.autoslider2 img {
  width: auto;
  height: 300px;
}
.display-4,.display-5,.display-6,.jumbotron h1{
	max-width:700px;
	margin: 0 auto;
}
.responsive{
}
.responsive .card .card-img-top ,.img-cover200{
  height: 220px;	
  width: 100%;
object-fit: cover;
}
.responsive .card h5.card-title{
  height: 2.5em;
	margin-bottom: 1em;
	overflow: hidden;
}
.responsive .card p{
  height: 4.5em;
	overflow: hidden;
}
.modaliframe{
	width: 100%;
	height: 65vh;
}
.offcanvasiframe{
	width: 100%;
	height: 98%;
}
#carouselExampleCaptions{
}
.carousel-inner {
    height: auto; /* 必要に応じて変更 */
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
}
.carousel-item img {
    height: auto;
	max-height: 700px;
    /* object-fit: cover; 画像をコンテナにフィット */
    /* object-position: center 10%; 画像の中央を表示 */
}
.carousel-caption {
    position: absolute;
    top: 70%; /* 垂直方向の中央 */
    left: 50%; /* 水平方向の中央 */
    transform: translate(-50%, -50%); /* 中央揃え */
}
.navbar-brand img{
	height:80px;
	width:auto;
}
#navbar {
    transition: all 0.5s ease-in-out; /* アニメーションの滑らかさを設定 */
}
.fixed-top {
    position: fixed;
    top: -50px; /* 最初は少し上に隠す */
    width: 100%;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    animation: fadeInDown 0.5s ease-in-out forwards; /* フェードイン＆スライド */
}
.fixed-top img{
	height:35px;
	width:auto;
}
@keyframes fadeInDown {
    from {
        top: -50px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}
.offcanvas {
	background-color: #EDF8EC !important; /* グリーングラデーション */
	background-image: -webkit-linear-gradient(0deg,rgba(237,248,236,1.00) 0%,rgba(255,255,255,1.00) 44.97%,rgba(255,255,255,1.00) 100%);
	background-image: -moz-linear-gradient(0deg,rgba(237,248,236,1.00) 0%,rgba(255,255,255,1.00) 44.97%,rgba(255,255,255,1.00) 100%);
	background-image: -o-linear-gradient(0deg,rgba(237,248,236,1.00) 0%,rgba(255,255,255,1.00) 44.97%,rgba(255,255,255,1.00) 100%);
	background-image: linear-gradient(90deg,rgba(237,248,236,1.00) 0%,rgba(255,255,255,1.00) 44.97%,rgba(255,255,255,1.00) 100%);
}





.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(100%) sepia(100%) saturate(500%) hue-rotate(90deg); /* グリーンに変更 */
}
.carousel-indicators li {
    background-color: green;
}
.offcanvas {
    transition: transform 0.8s ease-in-out; /* ゆっくり動く設定 */
}
#navbar .container-fluid.container-lg #offcanvasNavbar {
}

#navbar .container-fluid.container-lg #offcanvasNavbar {
    width: 50vw; /* デフォルトは 75% */
}
@media (max-width: 768px) {
#navbar .container-fluid.container-lg #offcanvasNavbar {
         width: 85vw; /* スマホサイズのときは 100% に */
    }
}
.navbar-toggler-icon {
  filter: invert(20%) sepia(90%) saturate(400%) hue-rotate(90deg) brightness(90%) contrast(100%);
}
.dropdown-menu {
  border-left: none;
  border-top: none;
  border-right: solid 1px #EDEDED;
  border-bottom: none;
  border-radius: 1; /* 角の丸みをなくす */
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.show {
  opacity: 1;
  transform: translateY(0);
}

.dropdown-item {
  padding: 10px 15px;
  border-bottom: 1px solid #ddd; /* 各項目の仕切り線を追加 */
}
.dropdown-item {
  display: flex;
  justify-content: space-between; /* 左右に配置 */
  align-items: center;
  font-size: 16px;
}

.size-label {
  flex-grow: 1; /* 左側のテキストを広げる */
}

.size-jp {
  text-align: left; /* 右側を揃える */
  min-width: 140px; /* USサイズ部分を固定 */
}

.dropdown-menu hr{
	width: 50%;
}
.btn-close {
  width: 30px; /* 幅を変更 */
  height: 30px; /* 高さを変更 */
  font-size: 24px; /* アイコンのサイズを変更 */
  filter: invert(27%) sepia(85%) saturate(400%) hue-rotate(120deg) brightness(90%) contrast(95%);
}
.offcanvas-body {
    overflow-y: auto; /* 縦方向にスクロール可能 */
    max-height: 90vh; /* 画面の高さを超えないようにする */
}
@keyframes softScale {
  0% { transform: scale(0.95);opacity: 100%; }
  90% { opacity: 100%; }
  95% { transform: scale(1.05);opacity: 0%; } /* 元のサイズに戻す */
  96% { transform: scale(0.96);opacity: 0%; } /* 元のサイズに戻す */
  100% { transform: scale(0.95);opacity: 100%; } /* 元のサイズに戻す */
}
.animated-img {
  animation: softScale 10s ease-in-out infinite; /* アニメーションを適用 */
  animation-play-state: paused; /* 初期状態で停止 */
}
.carousel-caption{
	font-weight: normal;	
	text-shadow: -0.1em -0.1em 1em #FFFFFF,0.1em 0.1em 1em #FFFFFF,-0.1em 0.1em 1em #FFFFFF,0.1em -0.1em 1em #FFFFFF,0px -0.1em 1em #FFFFFF,0px 0.1em 1em #FFFFFF,-0.1em 0px 0.1em #FFFFFF,0px -0.1em 1em #FFFFFF;
}
.carousel-inner img{
}
.card-dresslist {
	border: 1px solid #EFF1EF; /* 緑色で太いボーダー */
	color: rgba(150,150,150,1.00);
	background-color: rgba(255,255,255,1.00);
}.card-dresslist img{
	max-height: 60vh;
}
.card-dresslist .fs-1{
	font-family: "Times New Roman", Times, serif;
}
.dresscaption{
	color:rgba(130,130,130,1.00);
	max-width: 500px;
}
video {
  border: none;
  outline: none; /* フォーカス時の枠線も消す */
}
#leftdress .carousel-indicators {
    bottom: -35px; /* 必要に応じて調整 */
}
.carousel-indicators button {
    width: 50px !important; /* 必要に応じて調整 */
}
.modal-body {
    padding: 3px;  /* 余白削除 */
}
.table tr th {
	font-size: 0.6em;
}
.form-control::placeholder {
  color: rgba(0, 0, 0, 0.2); /* 色を薄くする */
}
fieldset {
  background-color: #F4F8F4; /* 薄いグレー */
}
.btn-gradient-green {
  background-color: #7EC963; 
  background: linear-gradient(45deg, #75D353,#4FD853, #38C9C4); /* グリーンのグラデーション */
color:white;
  border: none;
  padding: 15px 50px; /* ボタンを大きく */
  font-size: 18px; /* 文字サイズを大きく */
  border-radius: 3px; /* 角を少し丸く */
  cursor: pointer;
  transition: 0.3s;
  display: block; /* ブロック要素に */
  margin: 20px auto; /* 中央配置 */
  text-align: center; /* 文字の中央配置 */
	font-weight: bold;
}
.btn-gradient-green:hover {
color:rgba(5,113,0,1.00);
  background: linear-gradient(45deg, #B3D9F2, #F3EFC4); /* ホバー時の色変更 */
}
#selectedItem{
	width:100%;
}
        .dropdown {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: white;
            border: 1px solid #ccc;
			border-radius: 5px;
            min-width: 310px;
            box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
            z-index: 1;
    		max-height: 300px; /* 必要に応じて調整 */
    		overflow-y: auto;
        }

        .dropdown-content li {
            padding: 5px;
            display: flex;
            align-items: center;
            cursor: pointer;
			border-bottom: 1px solid #ccc; /* 線の色や太さを調整 */
			transition: background-color 0.2s ease-in-out; /* 滑らかな色変化 */
        }
		.dropdown-content li:hover {
		    background-color: #F1F5F0; /* 薄いグレーに変更 */
		}
        .dropdown-content li img {
            width: 50px;
            height:50px;
            margin-right: 10px;
			border-radius: 5px;

        }

        .dropdown:hover .dropdown-content {
            display: block;
        }
        .selected {
            display: flex;
            align-items: center;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
			border-radius: 5px;
        }
        .selected img {
            width: 100px;
            height: 100px;
            margin-right: 10px;
			border-radius: 5px;
        }
.gradient-text-green {
    background: linear-gradient(75deg, #326D1F, #3B8E3B);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.youtube169 {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 = 9/16 = 0.5625 = 56.25% */
  overflow: hidden;
}

.youtube169 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.formselecter img{
	max-width: 140px;
}
.selectedformdress {
  outline: 4px solid #BCE7D3;
}







@media screen and (max-width: 580px) { /*# slickスマホ高さ150 */
.autoslider .slick-slide img,.autoslider2 .slick-slide img {
  height: 150px;
}
#ad-mainleftside,#ad-mainrightside {
	display: none;
}
.carousel-inner {
    /* height: 60vh; 必要に応じて変更 */
}
.carousel-item img {
    /* height: 60vh; 必要に応じて変更 */
}
} /*# ここまで max-width: 580px */