:root {
  --base-font-size: 1rem;
  --responsive-factor: 1vw;
}
/* 共通のフォントスタイル */
body {
  font-family: "Noto Serif JP", serif;
  line-height: 1.5;
  letter-spacing: 0.1rem;
  color: #000;
}
/* マガジンタイトル */
.magazineTopNum, 
.magazineTopTitle, 
.magazineTopPerson, 
.magazineTopText, 
.magazineTopCredit {
	font-family: "Noto Serif JP", serif;
  text-align: center;
  margin: 0 auto;
}

.topsection {
  min-height: 800px;
  max-height: 1080px;
  display: flex; /* Flexboxを使う */
  flex-direction: column; /* 縦方向の配置 */
  justify-content: center; /* 上下中央揃え */
  align-items: center; /* 左右中央揃え */
  height: 100vh; /* ビューポート全体の高さを確保 */
  box-sizing: border-box; /* パディングやボーダーを含む */
  padding: 20px; /* 必要に応じてパディングを追加 */
}
.topsection .magazineTopNum span{font-family: "Noto Serif JP", serif;font-weight: 200; font-size:clamp(1.5rem, 1vw, 2rem);}
.topsection .magazineTopTitle span{font-family: "Noto Serif JP", serif;font-weight: 500; font-size:clamp(3rem, 1.5vw, 4rem);}
.topsection .magazineTopPerson span{font-family: "Noto Serif JP", serif;font-weight: 500; font-size:clamp(1.2rem, 1.5vw, 2rem);}
.magazineTopCredit{font-family: "Noto Serif", serif;font-weight: 500; font-style: italic; font-size:clamp(1.2rem, 1.5vw, 2rem);}

/* ロゴ */
.logo {
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
}
img.magazineLogo {
  display: block;
  padding: 70px 50px;
  width: clamp(300px, 3vw, 500px);
  margin: 0 auto;
}

/* 個別スタイル */
.magazineTopNum {
  padding: 0px;
  font-weight: bold;
  font-size: clamp(1.5rem, 1vw, 2rem);
}

.magazineTopTitle {
  padding: 10px;
  font-size: clamp(2rem, 1.5vw, 3.5rem);
}

.magazineTopPerson {
  padding: 0;
  font-size: 1.2rem;
}

.magazineTopText {
  width: 60%;
  min-width: 300px;
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1.8;
  text-align: justify;
  padding-top: clamp(80px, 3vw, 200px);
}

.magazineTopCredit {
  padding: 30px;
  padding-top: 50px;
	width: 100%;
  font-size: clamp(1rem, 1vw, 2rem);
  font-weight: 500;
}


.h1, .h2, .h3, h1, h2, h3 {
font-family: "Noto Serif JP", serif;    margin: 0px;
}
/* Wrapper */
#wrapper {
width: 90%;
max-width: 1024px;
/* width: clamp(40rem, 50vw, 100rem); */
  margin: 0 auto;
}

/* ロゴ */

/* カギカッコ以外のボーダーを削除 */
.magazineConcept .topMagazineConcept {
	width: 50%;
	padding: 0;
	margin:100px 0px;
}


.topMagazineConcept p{
	padding: 0px;
  font-size: 4rem;
}


.magazineConcept{
	padding:10px 0px;
	margin:50px 0px;
	font-family: "Noto Serif JP", serif;
	font-size: 2.5rem;
	font-weight: 500;
}


.topMagazineConcept {
  position: relative;
  line-height: 1.5;
  padding: 20px;
  border: none; /* 全体のボーダーを削除 */
	margin:100px 0px;
}

.topMagazineConcept2{
  position: relative;
  line-height: 1.5;
  padding: 20px;
  border: none; /* 全体のボーダーを削除 */
  margin:100px 0px;
  margin-top:0px;
}



/* interview__picture PC */

.p-interview__question01{
	padding-top:0px;
}

.interview__picture01__1,
.interview__picture03__1,
.interview__picture03__2,
.interview__picture03__3,
.interview__picture02__4,
.interview__picture07__1
{
	padding:20px;
}
.interview__picture02__1{
	padding: 20px;
	padding-top: 0px;
}
.interview__picture02__2{
	padding: 50px;	
	padding-top: 100px;	
}

.interview__picture01__1 img{
  padding-top: 100px;
}
}
.interview2__picture01__2 {
	margin-top:0px;	
}
.interview2__picture01__3{
	margin-top: -100px;
}
.interview__picture03__2 img{
	padding-top:100px;
}
.interview__picture03__3 img{
	padding-top:100px;
}

@media (max-width: 991px) {
	.spaceS{height:50px;}
		
  .interview__picture01__1{
  }
  .interview__picture01__1 img{
    padding-right: 0px;padding-top:30px;
  }
  .interview__picture01__2 img{
    margin-top: -100px;
  }
  .sp20px{
    padding-top: 20px;
  }
}

.interview__picture02__21__text{padding-top:25px;}

.interview__picture02__3 img {
  margin-top: 100px;
}
.interview2__picture06{
	margin-top: 20px;
}
.interview__picture03__1 img{}

.interview__picture02__4 img {
  margin-top: 300px;
}


.interview__picture03__1{
  margin-top: 100px;
}

.interview__picture04__1__text{padding-top:0;}

.interview__picture04__2 img{padding-top: 66px;}
.interview__picture04__3 img{padding-top: 180px;}

.interview__picture06__1 img{padding:20px;padding-top: 100px;}
.interview__picture06__2 img{padding:20px;padding-left: 10px;}
.interview__picture06__3 img{padding:20px;padding-top: 400px;}

@media (max-width: 991px) {
.interview__picture03__1{  margin-top: 0px;padding:0;}
.interview__picture06__2 img{margin-top: -50px;padding-top:0;}
.interview__picture06__3 img{margin-top: -50px;padding-top:0;}

}



.interview__picture07__1 img{padding-bottom: 50px;padding-top:100px;}

@media (max-width: 991px) {
.interview__picture07__1 {padding:0;}
.interview__picture07__1 img{padding-bottom: 50px;padding-top:120px;margin-right: -10px;}
.interview__picture07__2 img{margin-left: -10px;}
.interview__picture20__1 img{padding-bottom: 50px;}
.interview__picture20__2 img{padding-top:20px;padding-bottom: 50px;}
}


.interview__picture08__1 img{padding:100px 0;}


.interview__pictext08__1 h3{font-family: "Noto Serif JP", serif;font-size: 1.8rem; font-weight: 500; padding-bottom: 20px;text-align: center;}
h6.interview__pictext08__1{font-family: "Noto Serif JP", serif;font-size: 1.3rem;line-height: 2.2rem;text-align: justify;letter-spacing: 0.01rem;}


.picture9wide{
  margin: 100px auto;
}


.picture10{
  margin-top: 150px;
  margin-right: -30px: 
}
@media (max-width: 991px) {
	.picture10{
	  margin-top: 50px;
	}

}
.picture11{
  margin-top: -20px;
  margin-left: -30px;
}
.picture12{
  margin-top: -30px;
  padding-left: 10px;
}
.picture11-12{
	margin-top:-450px;	
}

.picture13{
  margin-top: 150px;
  margin-right: -30px: 
}
.picture14{
  margin-left: -30px;
  padding: 50px;
}
.picture15{
  margin-top: -500px;
  padding-left: 10px;
}
.picture16{
  margin-bottom: 100px;
}
@media (max-width: 991px) {
	.picture16{
	  margin-bottom: 50px;
	}

}
.interview__pictext{  font-family: "Noto Sans JP",sans-serif;
font-size: 1.2rem;font-weight: 100;letter-spacing: 0.02rem;line-height: 2rem; text-align: left;padding-top:10px;text-align: justify;}
/* .interview__pictext12{padding-left:20px;} */
.p-interview__question .interview__picture02__1{
	text-align: left;
	font-size: 2rem;
	padding-left:50px;
	padding-right:50px;
}
.p-interview__question .interview__picture02__2__text{	text-align: left;
	font-size: 2rem;
	padding-top:0px;	
	padding-left:50px;
	padding-right:50px;}


.p-interview__answer01,
.p-interview__answer02,
.p-interview__answer03
{padding:50px;font-size: 1.7rem;line-height: 3.3rem;}

.p-interview__answer04
{padding:60px 50px;font-size: 1.7rem;line-height: 3rem;}



/* footer */
.footer__logo {text-align: center;padding-top:100px;}
.footer__logo img{width: 100px;margin: 0 auto;padding-bottom: 20px;}





section.top{max-width: 1800px;max-height: 1500px;margin:0 auto;text-align: center;}
.section08{padding-top:100px;}




.magazineTopImage img{width: 100%;}

#wrapper {
  margin:0 auto;
}
#loading1 {
  display: none;
  background: url(images/logo_b.svg);
  background-size: 10%;
  background-repeat: no-repeat;
  background-position: center center;
}
#loading2 {
  display: none;
  background: url(images/loading1.jpg);
  background-size: cover;
  background-position: center center;
  animation: expandBackground 30s infinite;
  overflow-y: none;
  background-repeat: no-repeat;
}
.text {
  width: 100%;
  height: 100%;
  text-align: left;
  background: url(images/text.svg);
  background-size: 20% auto;
  background-repeat: no-repeat;
  background-position: bottom 100px center;
}
@keyframes expandBackground_pc {
  0% {
    background-size: 100%;
  }
  100% {
    background-size: 150%;
  }
}
@keyframes expandBackground_sp {
  0% {
    background-size: 200%;
  }
  100% {
    background-size: 250%;
  }
}
@media (max-width: 991px) {
  #loading1 {
    background-size: 30%;
  }
  #loading2 {
    background-size: cover;
    background-position: center;
  }
  .text {
    background-size: 70% auto;
    background-position: bottom 100px center;
  }
}


body{
  font-family: serif;
}

.p-interview__question {
  font-family: 'Noto Serif JP',serif;font-weight: 600;
  font-size: 2.4rem;
  text-align: center;
  color: #333;
  display: flex; /* 子要素を並べる */
  gap: 1px; /* 文字間隔を調整 */
  line-height: 3.5rem;
  letter-spacing: 0.05rem;
}

.p-interview__question span {
  opacity: 0;
  transform: translateY(0%);
  transition: opacity 0.3s ease, transform 0.3s ease; /* フェードインとスライドアップ */
}

.p-interview__question_topTitle span {
  opacity: 0;
  transform: translateY(0%);
  transition: opacity 0.3s ease, transform 0.3s ease; /* フェードインとスライドアップ */
}

.p-interview__question {
  display: block; /* コンテンツの幅に応じてブロックの幅を調整 */
  word-wrap: break-word; /* 必要に応じて単語を折り返し */
  overflow-wrap: break-word; /* 長い単語を折り返す */
}

.p-interview__question span {
  display: inline-block; /* 各文字を個別の要素として扱う */
  white-space: pre-wrap; /* 改行を尊重しつつ、スペースもそのまま扱う */
  vertical-align: top; /* 必要に応じて垂直方向を調整 */
}



    .p-interview__question span.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .p-interview__question_topTitle span.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .p-interview__answer {
	  font-weight: 300;
	  font-family: "Noto Serif JP", serif;
      padding-bottom: 100px;
      -webkit-transition-delay: 1.3s;
      transition-delay: 1.3s;
      letter-spacing: 0.05em;
      text-align: justify;
    }

    .fadeIn {
      opacity: 0;
      transform: translate(0, 0%);
      transition: 2s;
      transition-timing-function: ease;
    }

    .fadeIn_up {
      opacity: 0;
	  transform: translateY(5%); /* 下から開始 */
      transition: 1s;
      transition-timing-function: ease;
    }
	.fadeIn_down {
      opacity: 0;
	  transform: translateY(-5%); /* 下から開始 */
      transition: 1.5s;
      transition-timing-function: ease;
    }

	.fadeIn_right {
	  opacity: 0;
	  transform: translate(-3%, 0);
	  transition: 1.5s;
	  transition-timing-function: ease;
	}    
	.fadeIn_right_long {
	  opacity: 0;
	  transform: translate(-30%, 0);
	  transition: 3s;
	  transition-timing-function: ease;
	}    
    .fadeIn_left {
       opacity: 0;
      transform: translate(5%, 0%);
      transition: 1.5s;
      transition-timing-function: ease;
    }

   .fadeIn.is-show {
      transform: translate(0, 0);
      opacity: 1;
    }

    .fadeIn_up.is-show {
      transform: translate(0, 0);
      opacity: 1;
    }
    .fadeIn_down.is-show {
      transform: translate(0, 0);
      opacity: 1;
    }
    .fadeIn_left.is-show {
      transform: translate(0, 0);
      opacity: 1;
    }

    .fadeIn_up.is-show-delay {
      transform: translate(0, 0);
      opacity: 1;
    }

	.fadeIn_right.is-show {
	  transform: translate(0, 0);
	  opacity: 1;
	}
	.fadeIn_right_long.is-show {
	  transform: translate(0, 0);
	  opacity: 1;
	}
	
	.fadeIn_right_fast {
	  opacity: 0;
	  transform: translate(-3%, 0);
	  transition: 0.5s;
	  transition-timing-function: ease;
	}
	.fadeIn_right_fast.is-show {
	  transform: translate(0, 0);
	  opacity: 1;
	}
	
	
	.magazine_credit{padding-top:80px;text-align: center;}
	.magazine_credit p{font-size: 1.3rem;line-height: 1.5rem;margin:5px;}
	
	.l-footer{padding-bottom: 50px;}
	
	.article_logo{width: 200px;margin: 0 auto;}
	
	
	
	
	
	
	
	
	
	
	
/*　 sp   */
@media (max-width: 991px) {

	img.magazineLogo {
	    display: block;
	    padding: 50px 40px 30px 40px;
	    width: 50%;
	    margin: 0 auto;
	}

	.topsection {
		height: inherit;
	  display: block;
	  height: auto;
	  padding: 0px; /* 必要に応じてパディングを追加 */
	  max-height: inherit;
	}
	.magazineTopNum {
	  padding-top: 30px;
	  font-weight: bold;
	  font-size: clamp(1.5rem, 1vw, 2rem);
	}
	.p-interview__question {
		line-height: 2.5rem;
	}


	.topsection .magazineTopNum span{font-size:clamp(1.5rem, 1vw, 2rem);}
	.topsection .magazineTopTitle span{font-size:clamp(3rem, 1.5vw, 4rem);}
	.topsection .magazineTopPerson span{font-size:2rem;}
	.magazineTopCredit{font-family: "Noto Serif", serif;font-weight: 500; font-style: italic; font-size:clamp(1.2rem, 1.5vw, 2rem);}


	.magazineTopText {
	  width: 80%;
	  padding-top: 50px;
	  font-size: 1.4rem;
	}

	.magazineConcept{
		margin:10px 0px;
    padding:0;
	}
	.topMagazineConcept{
		margin:50px 0px;
	}
	#wrapper {
	width: 100%;
	}
	.p-interview__question{width:100%;margin:auto;letter-spacing: 0.02rem;}

	
	/* font */
	.top_sp img{}
	
	.magazineConcept{font-size: 2rem;}
	.topMagazineConcept p{
        font-size: 3.2rem;
        text-align: justify;
        padding: 0 20px;

	}
	p.topMagazineConceptSP{
		padding-top:70px;
	}


	.titleQuote {
	  position: relative;
	  padding: 30px;
	  border: none; /* 全体のボーダーを削除 */
	}
	.titleQuote::before,
	.titleQuote::after {
	  content: '';
	  position: absolute;
	  width: 10px;
	  height: 40px;
	  border: 2px solid #000; /* カギカッコの線の太さ */
	}
	
	/* 左上のカギカッコ */
	.titleQuote::before {
	  top: 10px;
	  left: 20px;
	  border-width: 1px 0 0 1px; /* 左上にカギカッコを表示 */
	}
	
	/* 右下のカギカッコ */
	.titleQuote::after {
	  bottom: 10px;
	  right: 20px;
	  border-width: 0 1px 1px 0; /* 右下にカギカッコを表示 */
	}
	
	/* images */

	.interview__picture02__1__text{font-size: 1.7rem;}
	.interview__picture02__3{
    padding:0;
		margin-left: 30px;
	}
	.interview__picture02__4 img {
	  margin-top: 0px;
	}
	.interview__picture02__4{
		margin-top: -30px;
	}
	
	
	
	.interview__picture02__1{padding: 20px;padding-top:30px;}
	.interview__picture02__2{
		padding-top: 30px;
	}
	.interview__picture02__2_text{padding:10px;}
	.interview__picture01__2 {
		margin-top:-100px;	
	}
	.interview__pictext03__1{padding: 10px;}
  .interview__pictext03__1sp{padding:10px 20px;}
	.interview__picture04__1{padding-top: 50px;}
	.interview__pictext04__2{padding:10px;}
  .interview2__picture05{padding-top:50px;padding-bottom: 20px;}
  
  .interview2__picture08{padding:50px;padding-bottom:0;}

	.interview__picture01__3{	margin-top:10px;padding:10px;}
	
	.p-interview__question span{font-size: 1.8rem;}
	
	.p-interview__answer_top{font-size: 1.4rem;line-height: 2.5rem;padding:20px;}
	
	
	.p-interview__answer01,
	.p-interview__answer02,
	.p-interview__answer03,
	.p-interview__answer04
	{font-size: 1.4rem;line-height: 2.7rem;padding:30px;}
	

	
	.p-interview__answer04{font-size: 1.4rem;line-height: 3rem;}

	.interview__picture05__1{margin-top:-150px;}
	.interview__picture05__3{margin-top:50px;}

  .interview__answer07{}
	.interview__picture04__3 img{padding-top:0px;}
	.interview__picture01__1{padding:0;}

	.interview__picture06__1 img{padding-top:30px;}


	.interview__picture08__1 img{padding-bottom:50px;padding-top: 0px;}

	.interview__pictext12{padding:10px;}

  .picture4_5{padding:50px;margin-top: 0;}
	.picture9wide{
  margin: 50px 0 0 0;
}
.picture13{
  margin: 50px auto;
}

	.button-border{margin-top: 10px; }

	.l-footer{width: 50%;margin:auto;padding-bottom:50px;}

}
/* 991px */

/* animation */
.button-border0{position: relative;width: 200px;padding:10px;margin-top:15px; font-size: 1.5rem;line-height: 3rem;float: right;}
/* 擬似要素の共通スタイル */
.button-border0::after,
.button-border0::before,
.button-border0 span::after,
.button-border0 span::before {
  background-color: #000;
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
  transition: all 1s ease;
}

/* 左上へ配置 */
.button-border0::after {
  width: 0px;
  height: 1px;
  top: -1px;
  left: -1px;
}

/* 右下へ配置 */
.button-border0::before {
  width: 0px;
  height: 1px;
  right: -1px;
  bottom: -1px;
}

/* 左下へ配置 */
.button-border0 span::after {
  width: 1px;
  height: 0px;
  left: -1px;
  bottom: -1px;
}

/* 右上へ配置 */
.button-border0 span::before {
  width: 1px;
  height: 0px;
  top: -1px;
  right: -1px;
}

/* inview */
.button-border0.inview::after,
.button-border0.inview::before {
  width: 100%;
  width: calc(100% + 1px);
}


.button-border0.inview span::after,
.button-border0.inview span::before {
  height: 100%;
  height: calc(100% + 1px);
}


.button-border{position: relative;width: 200px;padding:10px;margin-top:15px; font-size: 1.5rem;line-height: 3rem;float: right;}
/* 擬似要素の共通スタイル */
.button-border::after,
.button-border::before,
.button-border span::after,
.button-border span::before {
  background-color: #000;
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
  transition: all 1s ease;
}

/* 左上へ配置 */
.button-border::after {
  width: 0px;
  height: 1px;
  top: -1px;
  left: -1px;
}

/* 右下へ配置 */
.button-border::before {
  width: 0px;
  height: 1px;
  right: -1px;
  bottom: -1px;
}

/* 左下へ配置 */
.button-border span::after {
  width: 1px;
  height: 0px;
  left: -1px;
  bottom: -1px;
}

/* 右上へ配置 */
.button-border span::before {
  width: 1px;
  height: 0px;
  top: -1px;
  right: -1px;
}

/* inview */
.button-border.inview::after,
.button-border.inview::before {
  width: 100%;
  width: calc(100% + 1px);
}


.button-border.inview span::after,
.button-border.inview span::before {
  height: 100%;
  height: calc(100% + 1px);
}

/* accordion */
/* animation */
.button-border2{position: relative;width: 200px;padding:10px;margin-top:15px; font-size: 1.5rem;line-height: 3rem;float: right;}
/* 擬似要素の共通スタイル */
.button-border2::after,
.button-border2::before,
.button-border2 span::after,
.button-border2 span::before {
  background-color: #000;
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
  transition: all 1s ease;
}

/* 左上へ配置 */
.button-border2::after {
  width: 0px;
  height: 1px;
  top: -1px;
  left: -1px;
}

/* 右下へ配置 */
.button-border2::before {
  width: 0px;
  height: 1px;
  right: -1px;
  bottom: -1px;
}

/* 左下へ配置 */
.button-border2 span::after {
  width: 1px;
  height: 0px;
  left: -1px;
  bottom: -1px;
}

/* 右上へ配置 */
.button-border2 span::before {
  width: 1px;
  height: 0px;
  top: -1px;
  right: -1px;
}

/* inview */
.button-border2.inview::after,
.button-border2.inview::before {
  width: 100%;
  width: calc(100% + 1px);
}


.button-border2.inview span::after,
.button-border2.inview span::before {
  height: 100%;
  height: calc(100% + 1px);
}

/* accordion */
/* animation */
.button-border3{position: relative;width: 200px;padding:10px;margin:15px; margin-right: 0; font-size: 1.5rem;line-height: 3rem;float: right;}
	
/* 擬似要素の共通スタイル */
.button-border3::after,
.button-border3::before,
.button-border3 span::after,
.button-border3 span::before {
  background-color: #000;
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
  transition: all 1s ease;
}

/* 左上へ配置 */
.button-border3::after {
  width: 0px;
  height: 1px;
  top: -1px;
  left: -1px;
}

/* 右下へ配置 */
.button-border3::before {
  width: 0px;
  height: 1px;
  right: -1px;
  bottom: -1px;
}

/* 左下へ配置 */
.button-border3 span::after {
  width: 1px;
  height: 0px;
  left: -1px;
  bottom: -1px;
}

/* 右上へ配置 */
.button-border3 span::before {
  width: 1px;
  height: 0px;
  top: -1px;
  right: -1px;
}

/* inview */
.button-border3.inview::after,
.button-border3.inview::before {
  width: 100%;
  width: calc(100% + 1px);
}


.button-border3.inview span::after,
.button-border3.inview span::before {
  height: 100%;
  height: calc(100% + 1px);
}
.button-border0,.button-border,.button-border2,.button-border3 {
  position: relative;
  background-color: #fff;
  color: #000;
  text-align: center;
  padding: 10px;
  cursor: pointer;
font-family: "Noto Serif JP", serif;  font-size: 1.3rem;
/*   border: 1px solid #3498db; */
  transition: all 0.3s ease;
}

.button-border:hover {
  background-color: #000;
  color: #fff;
}
.button-border2:hover {
  background-color: #000;
  color: #fff;
}
.button-border3:hover {
  background-color: #000;
  color: #fff;
}

.button-border.inview {
  animation: fadeIn 1s ease forwards;
}
.button-border2.inview {
  animation: fadeIn 1s ease forwards;
}

.accordion-content {
font-family: "Noto Serif JP", serif;  color: #000;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* accordion */
/* アコーディオンリストのスタイル */
ul.accordion-list {
	font-family: "Noto Serif JP", serif;
  display: flex; /* Flexboxで子要素を横並び */
  justify-content: space-between; /* 各アイテムを均等に配置 */
  list-style: none; /* デフォルトのリストスタイルを削除 */
  padding: 0;
  margin: 0;
}

li {
  flex: 1; /* 横幅を均等に分配 */
  text-align: center; /* テキストを中央揃え */
  padding: 10px; /* 内側の余白 */
  box-sizing: border-box; /* パディングを含めた幅を計算 */
}

li img {
  width: 100%; /* 画像をリストの幅にフィット */
  height: auto; /* アスペクト比を維持 */
}

li p {
	color: #000;
  margin-top: 10px;
  font-size: 14px; /* テキストサイズを調整 */
  line-height: 1.5;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
/*
  ul.accordion-list {
    flex-direction: column; /* 縦並びに変更 */
    gap: 10px; /* 間隔を調整 */
  }

  li {
    width: 100%; /* 幅を全体に拡大 */
  }
*/
}
.accordion-content {
  box-sizing: border-box;
  overflow: hidden; /* 子要素がはみ出さないようにする */
  transition: height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
  opacity: 0; /* 初期状態で非表示 */
  height: 0; /* 初期状態で高さ0 */
  width: 100%; /* 横幅いっぱいに広げる */
}





/* animation */
.button-border{font-family: "Noto Serif JP", serif;position: relative;width: 200px;padding:10px;margin-top:15px; font-size: 1.5rem;line-height: 3rem;float: right;}
/* 擬似要素の共通スタイル */
.button-border::after,
.button-border::before,
.button-border span::after,
.button-border span::before {
  background-color: #000;
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
  transition: all 1s ease;
}

/* 左上へ配置 */
.button-border::after {
  width: 0px;
  height: 1px;
  top: -1px;
  left: -1px;
}

/* 右下へ配置 */
.button-border::before {
  width: 0px;
  height: 1px;
  right: -1px;
  bottom: -1px;
}

/* 左下へ配置 */
.button-border span::after {
  width: 1px;
  height: 0px;
  left: -1px;
  bottom: -1px;
}

/* 右上へ配置 */
.button-border span::before {
  width: 1px;
  height: 0px;
  top: -1px;
  right: -1px;
}

/* inview */
.button-border.inview::after,
.button-border.inview::before {
  width: 100%;
  width: calc(100% + 1px);
}


.button-border.inview span::after,
.button-border.inview span::before {
  height: 100%;
  height: calc(100% + 1px);
}





/* animation */

/*
.carticon {
  display: block;
  width: 30px;
  height: 30px;
  background-image: url('images/cart.svg');
  background-size: contain;
  background-repeat: no-repeat;
  transition: background-image 0.3s ease;
}
.button-border-bottom:hover .carticon {
  background-image: url('images/cart-hover.svg'); 
}
*/
/* accordion */
/* animation */
.button-border4{position: relative;width: 200px;padding:10px;margin:15px; margin-right: 10px; font-size: 1.5rem;line-height: 3rem;float: right;text-align: center;}
	
/* 擬似要素の共通スタイル */
.button-border4::after,
.button-border4::before,
.button-border4 span::after,
.button-border4 span::before {
  background-color: #000;
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
  transition: all 1s ease;
}

/* 左上へ配置 */
.button-border4::after {
  width: 0px;
  height: 1px;
  top: -1px;
  left: -1px;
}

/* 右下へ配置 */
.button-border4::before {
  width: 0px;
  height: 1px;
  right: -1px;
  bottom: -1px;
}

/* 左下へ配置 */
.button-border4 span::after {
  width: 1px;
  height: 0px;
  left: -1px;
  bottom: -1px;
}

/* 右上へ配置 */
.button-border4 span::before {
  width: 1px;
  height: 0px;
  top: -1px;
  right: -1px;
}

/* inview */
.button-border4.inview::after,
.button-border4.inview::before {
  width: 100%;
  width: calc(100% + 1px);
}


.button-border4.inview span::after,
.button-border4.inview span::before {
  height: 100%;
  height: calc(100% + 1px);
}


.button-border-bottom{font-family: "Noto Serif JP", serif;position: relative;margin: auto; padding:10px;margin-top:100px; font-size: 1.5rem;line-height: 3rem;text-align: center;}
/* 擬似要素の共通スタイル */
.button-border-bottom::after,
.button-border-bottom::before,
.button-border-bottom span::after,
.button-border-bottom span::before {
  background-color: #000;
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
  transition: all 1s ease;
}

/* 左上へ配置 */
.button-border-bottom::after {
  width: 0px;
  height: 1px;
  top: -1px;
  left: -1px;
}

/* 右下へ配置 */
.button-border-bottom::before {
  width: 0px;
  height: 1px;
  right: -1px;
  bottom: -1px;
}

/* 左下へ配置 */
.button-border-bottom span::after {
  width: 1px;
  height: 0px;
  left: -1px;
  bottom: -1px;
}

/* 右上へ配置 */
.button-border-bottom span::before {
  width: 1px;
  height: 0px;
  top: -1px;
  right: -1px;
}

/* inview */
.button-border-bottom.inview::after,
.button-border-bottom.inview::before {
  width: 100%;
  width: calc(100% + 1px);
}

.button-border:hover {
  background-color: #000;
  color: #fff;
}
.button-border2:hover {
  background-color: #000;
  color: #fff;
}

.button-border-bottom.inview {
  animation: fadeIn 1s ease forwards;
}
.button-border-bottom.inview {
  animation: fadeIn 1s ease forwards;
}

.button-border-bottom.inview span::after,
.button-border-bottom.inview span::before {
  height: 100%;
  height: calc(100% + 1px);
}




@media (max-width: 991px) {
	.button-border {width: 180px; padding:5px;}
	.button-border2 {width: 180px; padding:5px;}
	.button-border3 {width: 180px; margin-right: 15px;padding:5px;}

	.footer__logo {text-align: center;padding-top:100px;}
	.footer__logo img{width: 100px;margin: 0 auto;padding-bottom: 20px;}


}









    #wrapper {
      display: none;
    }
    #loading1 {
      display: none;
      background: url(images/loadinglogo.svg);
      background-size: 10%;
      background-repeat: no-repeat;
      background-position: center center;
    }
    #loading2 {
      display: none;
      background: url(images/loading_3.jpg);
      background-size: cover;
      background-position: center center;
      animation: expandBackground 30s infinite;
      overflow-y: none;
      background-repeat: no-repeat;
    }
    .text {
      width: 100%;
      height: 100%;
      text-align: left;
      background: url(images/magazine01_loading_bold2.svg);
      background-size: 20% auto;
      background-repeat: no-repeat;
      background-position: bottom 100px center;
    }
    @keyframes expandBackground_pc {
      0% {
        background-size: 100%;
      }
      100% {
        background-size: 150%;
      }
    }
    @keyframes expandBackground_sp {
      0% {
        background-size: 200%;
      }
      100% {
        background-size: 250%;
      }
    }
        @media (max-width: 991px) {
      #loading1 {
        background-size: 30%;
      }
      #loading2 {
        background-size: cover;
        background-position: center;
      }
      .text {
        background-size: 70% auto;
        background-position: bottom 100px center;
      }
    }
    





    
        /* 記事を探すボタン */
        .toggle-articles {
            position: fixed;
            width: 300px;
            left: 50%;
            bottom: 20px;
            transform: translateX(-50%) scale(0.8); /* 初期状態は小さく */
            padding: 16px 24px;
            background-color:rgb(255 255 255 / 0.6);
            color: #000;
            border: none;
            cursor: pointer;
            z-index: 250;
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
            opacity: 0;
            display: none;
            border-radius: 25px;
            font-size: 1.2rem;
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,.1490196078);
        }

        /* スクロール後にフワッと表示 */
        .toggle-articles.visible {
            display: block;
            opacity: 1;
            transform: translateX(-50%) scale(1);
			transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        }

		@media (max-width: 991px) {
        .toggle-articles {
            width: 60%;
            }
		}
		

        .toggle-articles.active {
            background-color: #333;
            color: #fff;
        }

        /* 記事一覧のオーバーレイ */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
            z-index: 190;
            overflow-y: scroll;
        }

        .overlay.active {
            display: block;
            opacity: 1;
        }

        /* 記事一覧ウィンドウ (横幅100%) */
        .article-list {
            position: fixed;
            top: 0px;
            left: 0;
            width: 100%;
            height: 100vh;
            background: #fff;
            transform: translateY(100%);
            transition: transform 0.5s ease-out, opacity 0.5s ease-out;
            z-index: 200;
            overflow-y: auto;
            padding: 20px 50px;
            padding-bottom: 80px;
  background: rgba(0, 0, 0, 0.7); /* 白 + 透明度 */
  backdrop-filter: blur(10px);         /* 背景ぼかし */

  -webkit-backdrop-filter: blur(10px); /* Safari対応 */

        }
.article-list-content {
            width: 80%;
            margin: 0 auto;
        }
        @media (max-width: 991px) {
          .article-list {
            padding: 20px;
            padding-bottom: 80px;
          }
.article-list-content {
            width: 100%;
            }
            }

        .article-list.active {
            transform: translateY(0);
        }

/* 記事 */
.stylingArticle {
  padding: 0px;
  margin: 10px auto;
  width: 100%;
  max-width: 600px;
  border-radius: 10px;
  text-align: center;

  /* Flexbox を適用 */
  min-height: 185px;
  align-items: stretch; /* ✅ 子要素の高さを揃える */
  align-items: center; /* 縦方向の中央揃え */
  justify-content: space-between; /* タイトルと画像を左右に配置 */
}
@media (max-width: 991px) {
  .stylingArticle {
    padding: 20px;
    margin: 10px auto;
  }
}





/* 画像エリア */
.stylingArticleImage {
    width: 70%;
    margin: 0 auto;
    flex-shrink: 0; /* 画像のサイズが縮小されないようにする */
    padding-top: 30px;
  
}

/* タイトルエリア */
.stylingArticleTitle {
  color: #fff;;
    width: 100%;
    text-align: center;
    padding: 0 10px;
}

/* 画像のサイズ調整 */
.stylingArticle img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 見出しの調整 */
.stylingArticle h2 {
    padding: 10px;
    font-size: 2rem;
}
.stylingArticle h3 {
    font-weight: 500;
    font-size: 1.2rem;
    padding-top: 0px;;
}


/* テキストの調整 */
.stylingArticle p {
    margin: 5px 0;
}
p.stylingArticleNo{
    margin: 5px 0;
    font-family: "Noto Serif JP", serif;
    font-weight: 200;
font-size: clamp(1.5rem, 1vw, 2rem);}
p.stylingArticleGuestName{
    margin-top: 10px;
}
/* レスポンシブ対応 */
@media (max-width: 991px) {
    .stylingArticle {
        width: 90%;
    }

        .stylingArticle h2 {
        margin: 0px 0px;
        line-height: 2rem;;
        letter-spacing: 0.1rem;
        text-align: center;
    }

    .stylingArticle {
        flex-direction: column; /* スマホでは縦並びに */
        text-align: center;
    }

    .stylingArticleTitle,
    .stylingArticleImage {
        width: 100%;
        text-align: center;
    }
    .stylingArticleTitle {
      padding: 0px;
  }
  .stylingArticle h3 {
        font-size: 1.6rem;
        padding: 0px;
    }
    .stylingArticleImage {
        margin-top: 10px; /* 画像との間隔を確保 */
    }
}






/* タブレット対応 */
@media (min-width: 768px) and (max-width: 991px) {
.topMagazineConcept {
    margin-top: 150px; /* 50pxから150pxに増やす */
    margin-bottom: 50px;
    margin-left: 0;
    margin-right: 0;
  }
}