@charset "utf-8";
/* CSS Document */
/*--------------------------------------------------
	画像拡大エリア
--------------------------------------------------*/
		.magnifying{
			position:relative;
		}
		.magnifying .thumbnail{
			width:100%;
		}
		.magnifying .ico_magnify{
			position: absolute;
			bottom:20px;
			right:20px;
		}
		@media screen and (min-width: 990px){
			.magnifying .ico_magnify{
				width:54px;
			}
		}
		@media all and (min-width: 768px) and (max-width: 989px) {
			.magnifying .ico_magnify{
				width:44px;
			}
		}
		@media all and (max-width: 767px) {
			.magnifying .ico_magnify{
				width:27px;
				bottom:5px;
				right:5px;
			}

		}
		
		.modal-contents-t .thumbnail{
			width:100%;
		}
		

/*--------------------------------------------------
	画像横並び1カラム
--------------------------------------------------*/

        .one-photo_pt{
            width:70%;
            margin:0 auto;
        }
   
        @media all and (max-width: 767px) {
	        .one-photo_pt{
            width:100%;
            }
        }
        
        .one-columnn img{
        	width:600px;
            margin:20px auto;
        }
   
        @media all and (max-width: 767px) {
	        .one-columnn img{
            width:100%;
            }
        }
        

/*--------------------------------------------------
	画像横並び2カラム
--------------------------------------------------*/
        .two-column{
            display:flex;
            justify-content: space-between;
            /*flex-wrap: wrap;*/
        }
        .two-column2{
            display:flex;
            justify-content: space-between;
            /*flex-wrap: wrap;*/
        }
        @media all and (max-width: 767px) {
	        .two-column2{
            display:block;
            }
        }
        
        .two-photo{
            width:49%;
        }
        
        .two-photo2{
            width:49%;
        }
        
        @media all and (max-width: 767px) {
	        .two-photo2{
            width:99%;
            margin:0 auto;
            }
        }
        
.captn01 {font-size:100%;line-height:150%;text-align:center;}
@media all and (max-width: 768px) {.captn01 {font-size:80%;line-height:140%;}}
        
/*--------------------------------------------------
	youtube表示
--------------------------------------------------*/
        .youtubemv {
          width: 100%;
          aspect-ratio: 16 / 9;
        }
        .youtubemv iframe {
          width: 100%;
          height: 100%;
        }
        
        
        
/*--------------------------------------------------
	table表示
--------------------------------------------------*/
  table.special2{
	font-size:13px;
	line-height:1.4;
}

table.special2 thead td{
	background:#eee;
	text-align:center;
	font-weight:bold;
}


table.special2 td{
	border:1px solid #ccc;
	padding:10px;
}


table.special2{
	margin:0 0 25px;
}

.kajo{
	padding-left:1em;text-indent:-1em;
}

.kajo2{
	padding-left:1em;text-indent:-1em;margin-bottom:4px;
}


.wish2 { background-color: #cccccc;}
.wish3 { background-color: #ffcccc;}
.wish4 { background-color: #ffcc80;}


@media screen and (max-width: 767px) {
	table.special2 td{
	font-size:13px;
	padding:7px;
    }
}

.terms_kajo {font-size:115%;line-height:160%;font-weight:600;padding-left:1em;text-indent:-1em;margin-bottom:0;}
.terms_kajo2 {font-size:115%;line-height:160%;font-weight:600;padding-left:1em;text-indent:-1em;margin-bottom:1em;}

.terms_kajo3 {font-size:115%;line-height:160%;font-weight:400;padding-left:1em;text-indent:-1em;margin-bottom:0;}
.terms_kajo4 {font-size:115%;line-height:160%;font-weight:400;padding-left:1em;text-indent:-1em;margin-bottom:2em;}

/*--------------------------------------------------
	横スクロール表示
--------------------------------------------------*/

@media screen and (max-width: 767px){
.scroll_list{
  margin: 0 auto;
  padding: 0;
  width: 99%; 
  overflow-x: auto; 
  white-space: nowrap;
  overflow-scrolling: touch; 
  -webkit-overflow-scrolling: touch;
}
.scroll_list li{
  display: inline-block;
  list-style: none;
  height: 680px;  /* 横スクロールする範囲の高さを指定 */
}
.list1{
  margin-left: 0;
}
.list2, .list3{
  margin-left: 30px;
}
}


/*--------------------------------------------------
	罫線囲み
--------------------------------------------------*/

.specialKakomi{
	border:1px solid #ccc;
	padding:10px 25px 5px;
	height:auto;
	overflow:hidden;
}

@media screen and (max-width: 767px){.specialKakomi{padding:8px 15px 4px;font-size:90%;}}

/*--------------------------------------------------
	モーダル表示
--------------------------------------------------*/

.modal-wrapper {
  z-index: 9999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 40px 10px;
  text-align: center;
}

.modal-button {
    color: #4f96f6;
    background-color: #eeeeee;
    font-weight: bold;
    text-align: center;
    cursor :pointer;
    transition: all 0.3s;
    display: block;
    margin-top: 40px;
    margin-bottom: 1px;
    padding: 12px 2px;
    max-width:300px;
    text-decoration: none;
}

.modal-button:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*下に動く*/

}
/*アイコンを表示*/
.modal-button:after {
font-family: "Font Awesome 5 Free";
  content: "\f2d0";
    padding-left: 8px;
}

/*ラベルホバー時*/
.modal-button:hover {
  color: #FFFFFF;
  background-color: #4f96f6;
  transition: .6s;
}

.modal-wrapper:not(:target) {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}

.modal-wrapper:target {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s, visibility .4s;
}

.modal-wrapper::after {
  display: inline-block;
  height: 100%;
  margin-left: -0.05em;
  vertical-align: middle;
  content: ""
}

.modal-wrapper .modal-window {
  box-sizing: border-box;
  display: inline-block;
  z-index: 20;
  position: relative;
  width: 80%;
  max-width: 1000px;
  padding: 0 0 0px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, .6);
  vertical-align: middle
}
@media screen and (max-width:640px) {.modal-wrapper .modal-window {width:100%;}}

.modal-wrapper .modal-window .modal-contents {
  max-height: 85vh;
  overflow-y: auto;
  text-align: left
}

.modal-wrapper .modal-window-t {
  box-sizing: border-box;
  display: inline-block;
  z-index: 20;
  position: relative;
  width: 90%;
  padding: 0 0 0px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, .6);
  vertical-align: middle
}
@media screen and (max-width:640px) {.modal-wrapper .modal-window-t {width:100%;}}

.modal-wrapper .modal-window-t .modal-contents-t {
  max-height: 85vh;
  overflow-y: auto;
  text-align: left
}

.modal-kv {display:block;width:100%;padding:0;margin-bottom:20px;}
@media screen and (max-width:640px) {.modal-kv {width:100%;}}

.modal-kvsp {display:none;width:100%;padding:0;margin-bottom:3vw;}
@media screen and (max-width:640px) {.modal-kvsp {display:block;}}

.modal-rd {width:80%;padding:0;margin:0 auto 30px;font-size:24px;line-height:30px;font-weight:400;color:#000;text-align:center;}
@media screen and (max-width:640px) {.modal-rd {width:85%;padding:0;margin:0 auto 4vw;font-size:18px;line-height:22px;}}

.modal-oppc {display:block;width:80%;padding:0;margin:0 auto 20px;}
@media screen and (max-width:640px) {.modal-oppc {display:none;}}

.modal-opsp {display:none;width:85%;padding:0;margin:0 auto 3vw;}
@media screen and (max-width:640px) {.modal-opsp {display:block;}}

.modal-catch {width:100%;margin:10px 0 20px;font-size:47px;line-height:85px;color:#717ec6;text-align:center;font-weight:bold;text-decoration:underline 5px;text-underline-offset:0.3em;}
@media screen and (max-width:640px) {.modal-catch {width:100%;margin:3vw 0 4vw;font-size:24px;line-height:42px;color:#717ec6;text-align:center;font-weight:bold;text-decoration:underline 3px;text-underline-offset:0.3em;;}}

.modal-note {width:75%;margin:30px auto 0;background-color:#eee;padding:2.4%;border-radius:5px;color:#7b88c5;font-size:21px;line-height:32px;font-weight:600;}
@media screen and (max-width:640px) {.modal-note {width:80%;margin:6vw auto 0;background-color:#eee;padding:3.6%;border-radius:4px;color:#7b88c5;font-size:18px;line-height:24px;font-weight:600;}}

.modal_title {
  font-size: 1.5em;
	position: relative;
	overflow: hidden;
  padding: 0;
}

.modal_title::before,
.modal_title::after{
	content: "";
	position: absolute;
	bottom: 0;
}

/* h2 プライマリカラー*/
.modal_title:before{
	border-bottom: 4px solid #6bb6ff;
	width: 100%;
}
/* h2 セカンダリカラー*/
.modal_title:after{
	border-bottom: 4px solid #c8e4ff;
	width: 100%;
}

.modal-contents p {
  margin: 0;
}

.modal-overlay {
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .8)
}

.modal-wrapper .modal-close {
  z-index: 20;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 35px;
  color: #95979c !important;
  font-size: 30px;
  font-weight: 700;
  line-height: 35px;
  text-align: center;
  text-decoration: none;
  text-indent: 0
}

.modal-wrapper .modal-close:hover {
  color: #2b2e38 !important
  }
  
/*--------------------------------------------------
	modal表示
--------------------------------------------------*/
  
.modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7); /* 背景色 */
    opacity: 0; /* 初期状態では透明 */
    visibility: hidden; /* 初期状態では不可視 */
    transition: opacity 0.5s, visibility 0.5s; /* アニメーション効果 */
}

/* モーダルの画像スタイル */
.modal-content {
    display: block;
    width: 98%;
    max-width: 1000px;
}

/* モーダルの閉じるボタン */
#close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/*--------------------------------------------------
	modal02表示
--------------------------------------------------*/
.modal2 {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.7);
  align-items: center;
  justify-content: center;
  animation: modalFadeIn 0.3s;
}

.modal2 img {
  max-width: 98%;  /* 画像の最大幅を親要素(modal)の90%に制限し、画面内に収まるようにする */
  max-height: 100vh;  /* 画像の最大高さをビューポートの高さ(100vh)に制限し、画面内に収まるようにする  */
  object-fit: contain;  /* 画像の比率を保持しつつ、指定された高さと幅に収める */
}

.clickable-image:hover {
  cursor: zoom-in;  /* ホバー時にカーソルをズームインのアイコンに変更 */
}

.modal2 img:hover {
  cursor: zoom-out;  /* モーダル内の画像にホバー時にカーソルをズームアウトのアイコンに変更 */
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/*--------------------------------------------------
	title2
--------------------------------------------------*/

.sub_ttl {font-size:18px;line-height:23px;font-weight:bold;margin:0 0 20px;text-align:left;}
@media screen and (max-width:640px) {.sub_ttl {font-size: 16px;line-height:20px;margin:0 0 16px;text-align:left;}}


/*--------------------------------------------------
	囲みなど
--------------------------------------------------*/

.box-2024 {
  border: 1px solid #ccc;
  background: #fffeea;
  padding: 20px 20px 5px;
  margin-bottom: 20px;
}
@media screen and (max-width:640px) {.box-2024 {padding: 20px 10px 0px;}}

/*--------------------------------------------------
	箇条書き
--------------------------------------------------*/

.tbl_kajo {padding-left:1em;text-indent:-1em;margin-bottom:10px;}