/*
Theme Name: Custom IM Theme
Author: Your Name
Description: Custom WordPress Theme for 4 Pages with Specific Navigation
Version: 1.0
*/

/* テーマカラー　color: #6dbfa3; */
/* 全てに適応される記述 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
   }
   :root {
	   --base-color: #6dbfa3;
	   --main-color: #f9f9f2;
   /*     --accent-color: #159741;     gray #d6dbd9*/
   }
   /* 記述例	color: var(--base-color); */
   body {
	   font-family: Arial, serif;
	   color: #585858;
	   font-family: "Crimson Text", serif;
		 font-weight: 400;
		 font-style: normal;
   }
   
   a {
	   display: inline-block;
   }
   a:hover {
	   opacity: 0.8;
	   transition: color 0.3s ease;
   }
   p {
	   line-height: 1.8em;
	   text-align: justify;
   }
   img {
	   width: 100%;
	   vertical-align: bottom;
	   object-fit: cover;
   }
   .container {
	   max-width: 1025px;
	   margin: 30px auto;
	   padding: 0 25px;
   }
   .color__base {
	   color: var(--base-color);
   }
   /* 余白セット */
   .mt_20 {
	   margin-top: 20px;
   }
   .mt_40 {
	   margin-top: 40px;
   }
   .mt_70 {
	   margin-top: 70px;
   }
   .mt_200 {
	   margin-top: 200px;
   }
   .mt_300 {
	   margin-top: 300px;
   }
   .mb_18 {
	   margin-bottom: 18px;
   }
   .mb_10 {
	   margin-bottom: 10px;
   }
   .mb_15 {
	   margin-bottom: 15px;
   }
   .mb_80 {
	   margin-bottom: 80px;
   }
   .mb_10_inline_block {
	   margin-bottom: 10px;
	   display: inline-block;
   }
   .pt_20 {
	   padding-top: 20px;
   }
   .padding_10 {
	   padding: 10px;
   }
   
   .text-align-center {
	   text-align: center;
   }
   .border-top {
	   border-top: 1px solid #585858;
   }
   .pc-only {
		   display: block;
	   }
   .sp-only {
		   display: none;
	   }
   @media screen and (max-width: 768px) {
	   .pc-only {
		   display: none;
	   }
	   .sp-only {
		   display: block;
	   }
   }
   
   .section__inner {
	   margin-bottom: 120px;
   }
   @media screen and (max-width: 768px) {
   .section__inner {
	   margin-bottom: 80px;
	   }
   }
   
   .page-content {
	   padding-top: 80px;
   }
   @media screen and (max-width: 768px) {
   .page-content {
	   padding-top: 62px;
   }
   }
   /* ---------------------------------ヘッダー */
   .header {
	   position: fixed;
	   top: 0;
	   width: 100%;
	   z-index: 1000;
	   height: 80px; /* 初期の高さ */
   }
   .main-header {
	   transition: all 0.3s ease;
   }
   
   @media screen and (max-width: 768px) {
   .main-header {
	   height: 62px; /* 初期の高さ */
	   }
   }
   .header-inner {
	   height: inherit;
	   display: flex;
	   justify-content: space-between;
	   align-items: center;
	   padding-left: 25px;
	   padding-right: 25px;
	   max-width: 1025px;
	   margin: 0 auto;
	   letter-spacing: 0.12em;
	   font-size: 1.2em;
   }
   .contact-header {
	   text-align: center;
   }
   
   .main-menu ul{
	   display: flex;
	   gap: 30px;
   }
   
   /* ナビゲーションの文字色をトップとその他で条件分岐 */
   /* トップページのナビゲーション */
   .nav-front a {
	   color: #eee;
   }
   
   /* 他のページのナビゲーション */
   .nav-default a,
   .main-header.scrolled .nav-front a {
	   color: #585858;
   }
   
   .header.main-header.scrolled .main-menu.pc-only{
	   color: var(--base-color); 
   }
   .header-inner .logo img {
	   width: 128px;
	   height: 64px;
   }
   @media screen and (max-width: 768px) {
   .header-inner .logo img {
	   width: 84px;
	   height: 42px;
   }
	   
   .mobile-menu ul {
	   text-align: center;
	   line-height: 4em;
	   color: #6dbfa3;
	   padding: 100px;
	   }	
   }
   
   
   /* ------ヘッダー スクロールアップ　start　*/
   
   /* スクロール後のスタイル */
   .main-header.scrolled {
	   background-color: rgba(255,255,255,0.8);
	   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 軽い影を追加 */
	   padding: 0; /* スクロール後のパディングを少なく */
	   height: 75px; /* スクロール後の高さを小さく */
	   transition: all 0.3s ease; /* スムーズに変化 */
   }
   
   /* ヘッダーの縮小 */
   .main-header .logo a {
	   font-size: 1.5rem;
	   transition: font-size 0.3s ease;
   }
   
   .main-header.scrolled .logo a {
	   font-size: 1.2rem; /* 縮小後のサイズ */
   }
   /*-----ヘッダー スクロールアップ　end　*/
   /* ---------------------------------ヘッダー (ロゴのみ)　*/
   .contact-header {
	   justify-content: center;
   }
   @media screen and (max-width: 768px) {
	   .header-inner.contact-header .logo {
		   display: block;
	   }
	   .header-inner.contact-header {
		   justify-content: center;
	   }
	   .main-header.scrolled {
		   height: 57px; /* スクロール後の高さを小さく */
	   }
   }
   
   /* ---------------------------------トップページ */
   /* ---------------------------------メインビュー */
   .mainvview {
   
   }
   .mainvview__inner {
	   display: flex;
	   position: relative;
	   object-fit: cover;
   }
   .text-large {
	   font-family: "Noto Serif JP", serif;
		 font-optical-sizing: auto;
		 font-weight: 200;
		 font-style: normal;
	   margin-bottom: 1em;
	   font-size: 2.5em;
	   letter-spacing: 0.3em;
   }
   .text-small {
	   font-size: 1.6em;
	   line-height: 2.2em;
   }
   .mainvview__logo img {
	   width: 234px;
	   height: auto;
	   background: #fff;
   }
   @media screen and (max-height: 760px) {
	   .text-large {
		   margin-bottom: 0.5em;
		   font-size: 1.5em;
		   letter-spacing: 0.3em;
	   }
	   .text-small {
		   font-size: 1.2em;
	   }
	   .mainvview__logo img {
		   width: 180px;
	   }
   }
   
   /* スライダー */
   .slider-pc, .slider-sp {
	   width: 100%;
	   height: auto;
   }
   
   .slider-pc img, .slider-sp img {
	   width: 100%;
	   height: 100vh;
	   object-fit: cover;
	   object-position: center; /* 通常は中央 */
	   display: block;
   }
   /* 2枚目の画像の表示位置を微調整 */
   .slider-pc .slider-img2 {
	   object-position: 67% center; /* 右寄せしつつ、少し中央寄りに */
   }
   
   
   .mainvview__title {
	   position: absolute;
	   top: 50%;
	   left: 25%;
	   transform: translate(-50%, -50%);
	   z-index: 10; /* スライダーの上に配置 */
	   color: #eee; /* 文字色を白に */
	   margin-top: 90px;
   }
   
   /* ---------------------------------コンセプト */
   .content {
	   display: flex;
	   align-items: center;
   }
   .concept__container {
	   padding-bottom: 10px;
   }
   .content .left {
	   width: 50%;
	   padding-right: 20px;
   }
   .content .right {
	   width: 50%;
	   padding-left: 20px;
   }
   .section__img {
	   object-fit: cover;
	   width: 100%;
   }
   .section__title {
	   font-weight: 300;
	   font-size: 1.5em;
	   color: #6dbfa3;
	   margin-bottom: 15px;
   }
   .section__title-en {
	   font-family: "Cormorant Garamond", serif;
		 font-weight: 300;
		 font-style: normal;
	   font-size: 0.8em;
	   margin-bottom: 12px;
   }
   .img-sub {
	   display: flex;
	   gap: 20px;
	   padding-left: 50px;
	   position: relative;
   }
   .img-sub__inner-l img{
	   object-fit: cover;
	   width: 150px;
	   height: auto;
   }
   .img-sub__inner-r img{
	   object-fit: cover;
	   width: 200px;
	   height: auto;
   }
   .img-sub__inner-r2 img{
	   object-fit: contain;
	   width: 200px;
	   height: auto;
	   position: absolute;
	   top: 15%;
	   right: 5%;
   }
   .lymp__container {
	   flex-direction: row-reverse;
   }
   .lymp .left {
	   padding-left: 10px;
   }
   .lymp .right {
	   padding-right: 10px;
   }
   @media screen and (max-width: 768px) {
	   .content {
		   display: block;
	   }
	   .content .left {
		   width: 100%;
		   padding: 50px 0;
	   }
	   .content .right {
		   width: 100%;
		   padding-right: 0;
		   padding-left: 0;
		   padding-bottom:10px;
	   }
	   .img-sub {
		   padding-left: 0;
	   }
	   .img-sub__inner-l img {
		   width: 100px;
		   height: 140px;
	   }
	   .img-sub__inner-r img {
		   width: 140px;
		   height: 100px;
	   }
	   .img-sub__inner-r2 img {
		   width: 120px;
		   top: 32%;
		   right: 0;
	   }
	   .section__title {
		   font-size: 1.3em;
	   }
	   .section__img {
		   padding-left: 0;
	   }
	   .section__img {
		   padding-right: 0;
	   }
   }
   /* -------------------------------------メニューのスライダー */
   
   /* ドットのスタイル */
   .slick-dots {
	   display: flex !important;
	   justify-content: center;
	   align-items: center;
	   gap: 2px; /* ドットの間隔 */
	   list-style: none; /* デフォルトのリストスタイルを削除 */
	   padding: 0;
	   margin-top: 15px; /* 必要に応じて調整 */
   }
   
   .slick-dots li {
	   display: inline-block;
   }
   
   .slick-dots li button {
	   font-size: 0;  /* 数字を非表示 */
	   width: 20px;
	   height: 6px;
	   background-color: #ccc; /* ドットの色 */
	   border: none;
   }
   
   .slick-dots li.slick-active button {
	   background-color: #666666; /* アクティブ時の色 */
   }
   
   .slider-front-menu {
	   position: relative;
   }
   
   .front-menu__text {
	   position: absolute;
	   top: 50%;
	   left: 5%;
	   transform: translatey(-50%);
	   width: 42%;
	   background: rgba(255, 255, 255, 0.8);
	   padding: 3em;
   }
   @media screen and (max-width: 768px) {
   .front-menu__text {
	   left: 5%;
	   width: 90%;
	   padding: 1em;
	   }
   }
   
   /* メニューページへのリンク */
   .menu-link {
	   width: 100%;
	   text-align: right;
   
   }
   .arrow-link {
	   padding-right: 120px;
		   position: relative;
   }
   .arrow-link::after {
	   position: absolute;
	   content: "";
	   top: -8px !important;
	   right: 32px !important;
	   width: 58px;
	   height: 28px;
	   background-image: url(/wp-content/themes/custom_im_theme/images/arrow_common.svg);
	   background-size: contain;
	   background-repeat: no-repeat;
   }
   @media screen and (max-width: 768px) {
   .menu-link {
		padding-top: 40px
	   }
   }
   /* -------------------------------------image-movie */
   .image-movie video {
	   width: 100%;
   }
   /* -------------------------------------------------------トップページ ここまで */
   /* -------------------------------------Aboutページ */
   .mainvview-about {
	   display: flex;
   }
   .aboutus {
	   background-color: #cccccc;
	   padding: 8% 5%;
	   position: absolute;
	   left: 2%;
	   top: 70%;
   }
   .section__title.lymp {
	   color: #333;
   }
   .ab_lymp {
	   background-image: url("/wp-content/themes/custom_im_theme/images/imgab3.webp");
	   background-repeat: no-repeat;
	   background-size: cover;
	   padding: 120px 50px;
	   color: white;
   }
   .meritt {
	   background-color: var(--main-color);
	   padding: 0;
   }
   .meritt_number {
	   display: flex;
	   align-items: center;
	   gap: 10px;
   }
   .meritt_numbers {
	   width: 40px;
		 height: 40px;
		 padding-top: 10px;
		 border-radius: 50%;
	   background-color: #cccccc;
	   color: white;
		 text-align: center;
		 box-sizing: border-box;
   }
   .meritt__container {
	   padding-left: 20%;
   }
   @media screen and (max-width: 768px) {
	   .meritt .right {
		   padding-bottom: 0;
	   }
	   .aboutus {
		   top: 64%;
	   }
   }
   /* -------------------------------------Menuページ  */
   .menu-section__img {
	   object-fit: cover;
	   width: 100%;
   }
   .menu-section__item {
	   display: grid;
	   grid-template-columns: 1fr 1fr;
	   gap: 60px 40px;
   }
   .menu__txet {
	   padding: 10px;
   }
   
   @media screen and (max-width: 768px) {
	   .menu-section__item {
		   grid-template-columns: 1fr;
	   }
   }
   .menu .section__inner {
	   margin-bottom: 90px;
   }
   @media screen and (max-width: 768px) {
	   .menu .section__inner {
		   margin-bottom: 60px;
	   }
   }
   /* ---------------------------------お問い合わせ */
   label {
	   display: inline-block;
	   margin-bottom: 25px;
   }
   .hissu {
	   background: #df6a6a;
	   padding: 4px 4px;
	   border-radius: 4px;
	   font-size: 12px;
	   color: #fff;
	   margin-right: 10px;
   }
   .wpcf7-form-control {
	   display: block;
	   width: 100%;
	   height: calc(1.5em + .75rem + 2px);
	   padding: .375rem .75rem;
	   font-size: 1rem;
	   font-weight: 400;
	   line-height: 1.5;
	   color: #495057;
	   background-color: #fff;
	   background-clip: padding-box;
	   border: 1px solid #ced4da;
	   border-radius: .25rem;
	   transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
   }
   .container__inner {
	   width: fit-content;
	   margin-inline: auto;
   }
.wpcf7-submit {
	display: block;
    text-align: center;
    vertical-align: middle;
    line-height: 1.5;
    background-color: #6dbfa3;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    width: 150px;
    margin-inline: auto;
}


.wpcf7-submit:hover {
  background-color: #5cae94; /* ホバー時の背景色 */
}

   /* ------------------------------------------home.php(投稿一覧ページ) */
   
   .category-links {
	   display: flex;
	   justify-content: center;
   }
   
   .post-archive {
	   padding: 20px;
   }
   
   .post-archive h1 {
	   font-size: 2rem;
	   margin-bottom: 20px;
   }
   
   .category-links__inner {
	   padding-bottom: 20px;
   }
   .post-archive .btn {
	   padding: 15px 25px;
	   background-color: #f9f9f2;
	   display: block;
	   border-radius: 10px;
	   width: 200px;
   }
   .post-archive--li {
	   padding: 25px;
   }
   .post-archive a {
	   font-size: 1.2rem;
	   font-weight: bold;
	   text-decoration: none;
	   color: #6dbfa3;
   }
   .post-archive a:hover {
	   color: #4a8c7d;
   }
   @media screen and (max-width: 768px) {
	   .post-archive--li {
		   padding: 25px 0;
	   }
   }
   /* ---------------------------------single.php(個別投稿ページ) */
   .post-meta {
	   font-size: 0.9rem;
	   color: #666;
	   margin-bottom: 20px;
   }
   
   .post-content {
	   line-height: 1.6;
	   font-size: 1rem;
   }
   .post__inner {
	   padding: 20px 50px;
	   max-width: 800px;
	   margin: 75px auto;
   }
   /* -----------------ページネーション */
   .post-navigation {
	   display: flex;
	   justify-content: space-between;
	   align-items: center;
	   margin-top: 20px;
	   padding: 25px 0;
	   border-top: 1px solid #ddd;
   }
   
   .post-navigation .nav-previous,
   .post-navigation .nav-next,
   .post-navigation .nav-home {
	   flex: 1;
	   text-align: center;
   }
   
   .post-navigation .nav-home {
	   text-align: center;
	   flex: 2;
   }
   
   /* ---------------------------------フッター */
   .footer {
	   background-color: #cccccc;
	   padding: 20px;
	   color: white;
   }
   .footer__inner-text {
	   text-align: center;	
   }
   /* ---------------------------------archive.phpのスタイル */
   .archive-post-item a {
	   display: inline;
   }
   .read-more {
	   font-size: 0.8em;
   }
   
   /*----------------------------------- ハンバーガーメニュー */
   /* スマホサイズのスタイル */
   @media screen and (max-width: 768px) {
	   .hamburger-icon {
		   display: inline-block;
		   cursor: pointer;
		   position: relative;
		   width: 30px;
		   height: 24px;
		   z-index: 1000;
	   }
	   .hamburger-icon span {
		   display: block;
		   position: absolute;
		   width: 30px;
		   height: 3px;
		   background-color: #6dbfa3;
		   border-radius: 2px;
		   transition: all 0.3s ease-in-out;
	   }
	   .hamburger-icon span:nth-child(1) {
		   top: 0;
	   }
	   .hamburger-icon span:nth-child(2) {
		   top: 10px;
	   }
	   .hamburger-icon span:nth-child(3) {
		   top: 20px;
	   }
   
	   /* ハンバーガーメニューが開かれたとき */
	   .hamburger-icon.active span:nth-child(1) {
		   top: 10px;
		   transform: rotate(45deg);
	   }
	   .hamburger-icon.active span:nth-child(2) {
		   opacity: 0; /* 真ん中の線を非表示 */
	   }
	   .hamburger-icon.active span:nth-child(3) {
		   top: 10px;
		   transform: rotate(-45deg);
	   }
   
	   .mobile-menu {
		   display: none;
		   position: absolute;
		   top: 0;
		   left: 0;
		   width: 100%;
		   height: 100vh;
		   background-color: #ffffff;
		   transform: translateY(-100%);
		   transition: transform 0.5s ease-in-out;
	   }
	   .mobile-menu.active {
		   display: block;
		   transform: translateY(0);
	   }
   }
   /* トップページに表示している投稿部分 */
   .latest-posts {
	   padding: 20px;
	   background-color: #f1eeee;
	   border-radius: 8px;
	   justify-content: center;
	   margin-bottom: 80px;
   }
   @media screen and (max-width: 768px) {
	   .latest-posts {
		   margin-bottom: 50px;
	   }
   }
   
   /* ローディング画面 */
   #loading {
	   position: fixed;
	   top: 0;
	   left: 0;
	   width: 100%;
	   height: 100%;
	   background-color: #fff;
	   display: flex;
	   justify-content: center;
	   align-items: center;
	   z-index: 9999;
	   opacity: 1;
	   transition: opacity 0.5s ease-out; /* フェードアウト */
   }
   
   /* サイトコンテンツ */
   #site-content {
	   opacity: 0; /* 初期状態で非表示 */
	   transition: opacity 1s ease-out; /* フェードイン */
   }
   
.slick-list.draggable {
	position: relative;
} 
.front-menu__txet {
	position: absolute;
	bottom: 0;
	background-color: rgba(255,255,255,0.8);
	margin: 10px;
	padding: 10px;
}