@charset "utf-8";

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0); 
    }
}


/*===================================================
	1-1. Font (Yahoo UI Library Fonts CSS)
===================================================*/

body {
	font-size: 12px;
	font-size: small;
	font: x-small;
	font-family: "Noto Sans JP", sans-serif;
}

table {
	font-size: inherit;
}

select, 
input, 
textarea {
	font: 99% arial,helvetica,clean,sans-serif;
}

pre, 
code {
	font: 115% monospace;
	font-size: 100%;
}
a {
	text-decoration:none;
}

/*===================================================
					共通CSS
===================================================*/

#ccBOx {
	width: 100%;
/*	background-color: #d0cece;*/
	padding-top: 140px;
	padding-bottom: 5%;
	text-align: center;
	align-items: center;
}

@media screen and (max-width: 980px) {
#ccBOx {
	width: 100%;
	padding-top: 0px;
	padding-bottom: 5%;
}
}

/*@import url("https://p.typekit.net/p.css?s=1&k=izc7peq&ht=tk&f=60838&a=87929704&app=typekit&e=css");

@font-face {
font-family:"century-gothic-std";
src:url("https://use.typekit.net/af/d3f1b9/0000000000000000773f3cf0/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/d3f1b9/0000000000000000773f3cf0/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/d3f1b9/0000000000000000773f3cf0/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:1,200..500;font-stretch:normal;
}*/

/*===================================================
					オリジナル CSS
===================================================*/

/*要素を全画面に広げる*/
:root {

  --vw: 1vw;

}

/*要素を全画面に広げる*/
.thirty {

              position:relative;

              width: calc( var(--vw) * 100 );

              left:50%;

              transform: translate(-50%, 0%);

              -webkit-transform: translate(-50%, 0%);

              -ms-transform: translate(-50%, 0%);

              overflow: hidden;

              background-color:#fff;


}

/*スクロール時にフェードイン*/
.scroll-block {
    transform: translateY(100px);
    transition: all 1.5s;
    opacity: 0;
    
}

.blockIn {
    transform: translateY(0px);
    opacity: 1;
}

.main-area {
  width: 80%;
  margin: 5% auto;
              color: #1c2743;
              font-family: "hiragino-kaku-gothic-pron","century-gothic-std",sans-serif;
}

.mainbanner {
  width: 70%;
  margin: 0 auto 5% auto;
}
@media screen and (max-width: 980px) {
  .mainbanner{
    width: 95%;
  }
  .main-area {
    width: 90%;
    margin: 0 auto;
  }
}

.mainbanner .titleImg_sp{
  display: none;
}

.mainbanner .titleImg_pc{
    width:100% ;
    margin:0 auto ;
}

.mainbanner .titleImg_pc img {
  width: 100%;
}

.day-area {
  width: 30%;
  text-align: left;
}
@media screen and (max-width: 980px) {
.day-area {
  width: 100%;
}
}
.concept-title {
  width: 100%;
  display: block;
  text-align: center;
  margin: 0 auto 10% auto;
}

.concept-title h1 {
  font-size:3.0rem;
  font-weight: 700;
  letter-spacing: 2px;
  font-family: "yu-mincho-pr6n",sans-serif;
}

.concept-title span {
  font-size: 2.0rem;
  font-weight: 500;
  letter-spacing: 2px;
  font-family: "yu-mincho-pr6n",sans-serif;
}

.contents-block {
  width: 100%;
  margin: 0 auto 10% auto;
}

.contents-block  .Title {
  width: 100%;
  text-align: center;
  font-family:"century-gothic-std",sans-serif;
  font-size: 150%;
  font-weight: 400;
  letter-spacing: 2px;
}
@media screen and (max-width: 980px) {
  .concept-title {
  width: 90%;
  text-align: left;
  }
  .concept-title h1 {
    font-size: 1.8rem;
  } 
  .concept-title span {
    font-size: 1.4rem;
  }
  .contents-block  .Title {
    font-size: 1.5rem;
  }
}

.line {
  background-color: #1c2743;
  width: 1px;
  height: 5%;
  text-align: center;
  margin: 3% auto;
}

.mokuji {
    width: 80%;
    display: flex;
    justify-content: center;
    margin: 0 10% 5% 10%;
    text-align: left;
    border: 1px solid #1c2743;
  font-family: "yu-mincho-pr6n",sans-serif;

}

.mokuji ul {
    font-size: 150%;
    list-style: none;
    padding: 0; /*ブラウザではリストの・を消去しても左側に空白が残るのでこの指示が必要*/
    line-height: 330%;
    margin: 5%;
}

.mokuji li a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.mokuji li a:link,
.mokuji li a:visited,
.mokuji li a:active {
  color: #1c2743;
}

.mokuji li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background-color: #1c2743;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.mokuji li a:hover::after {
  transform: scaleX(1);
}
@media screen and (max-width: 980px) {
  .mokuji ul {
    font-size: 1.4rem;
  }
  .mokuji {
    width: 100%;
    margin: 0 auto 10% auto;
}
}

.contents-block .subTitle {
  width: 100%;
  display: block;
  text-align: center;
  margin: 0 auto 2% auto;
}

.contents-block .subTitle span {
  font-size: 130%;
  font-weight: 500;
  letter-spacing: 2px;
  font-family: "yu-mincho-pr6n",sans-serif;
}

.contents-block .text-area {
  width: 100%;
  display: block;
  text-align: center;
  margin: 0 auto 10% auto;
}

.contents-block .text-area span {
  font-size: 110%;
  font-weight: 300;
  letter-spacing: 2px;
}
.contents-block .text-area-sp {
  display: none;
}

.contents-block .contentsWide3 {
  width: 84%;
  display: grid;
  gap: 1%;
  grid-template-columns: repeat(3, 1fr);/*要素を画面2分割で横に並べる*/
  margin: 0 auto 10% auto;
}

.contentsWide3 .wide-contents {
  background-color: #f7f4ed;
  border: 1px solid #1c2743;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}

.contentsWide3 .wide-contents:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.wide-contents .num_maru {
   flex-shrink: 0;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background-color: #1c2743;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  margin:5% auto;
  font-family: "yu-mincho-pr6n",sans-serif;
}

.wide-contents .title {
  width: 100%;
  text-align: center;
  margin: 1% auto;
}

.wide-contents .title span {
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: 2px;
  font-family: "yu-mincho-pr6n",sans-serif;

}

.wide-contents .subTxt {
  width: 84%;
  text-align: left;
  margin: 10% auto;
  line-height: 200%;
}

.wide-contents .subTxt span {
  font-size:1.4rem;
  font-weight: 400;
}

.contents-block .picture {
  width: 50%;
  margin: 0 auto 10% auto;
}

.contents-block .picture img {
  display: block;
  width: 100%;
}

.color-area {
  width: 100%;
  padding: 10% 0;
  background-color: #f7f4ed;
}

@media screen and (max-width: 980px) {
  .contents-block .subTitle {
    text-align: left;
    width: 90%;
  }
.contents-block .text-area {
  width: 85%;
  text-align: justify;
}
.contents-block .text-area span {
  font-size: 1.3rem;
}
.contents-block .text-area-sp {
  width: 85%;
  display: block;
  text-align: center;
  margin: 0 auto 10% auto;
}

.contents-block .text-area-sp span {
  font-size: 0.9rem;
}
.contents-block .contentsWide3 {
  display: block;
  width: 100%;
}
.contents-block .wide-contents {
  margin: 5%;
}
.contents-block .picture {
  width: 100%;
}
.wide-contents .num_maru {
  width: 75px;
  height: 75px;
  font-size: 1.8rem;
}
.wide-contents .title span {
  font-size: 1.8rem;
}
.wide-contents .subTxt span {
  font-size: 1.3rem;
}
.wide-contents .subTxt {
  line-height: 2.5rem;
}
}

.chooseBox {
  width: 80%;
  margin: 2% auto;
  display: block;
  background-color: #fff;
  border: 1px solid #1c2743;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}

.chooseBox:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.chooseBox .num_maru {
   flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #1c2743;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  margin-top: 1%;
}

.chooseBox .R-area {
  display: flex;
  margin: 1% 10%;
}

.chooseBox .title {
  width: 100%;
  text-align: left;
  margin: 1.5% 5% 0 1%;
}

.chooseBox .title span {
  font-size: 2.3rem;
  font-weight: 500;
  letter-spacing: 2px;
  font-family: "yu-mincho-pr6n",sans-serif;
}

.chooseBox .text {
  width: 84%;
  text-align: left;
  line-height: 200%;
  margin: 0 auto 1% 14.5%;
}

.chooseBox .text span {
  font-size:1.5rem;
  font-weight: 400;
}

.contentsTitle-area {
  width: 85%;
  display: flex;
  margin: 0 auto;
  gap: 1%;
}

.contentsTitle-area .abc {
  flex-shrink: 0;
  width: 75px;
  height: 75px;
  background-color: #1c2743;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 20px;
  font-family: "yu-mincho-pr6n",sans-serif;
  margin: auto 0;
}

.contentsTitle-area .Txt {
  display: block;
  width: 100%;
}

.contentsTitle-area .TxtA {
  width: 100%;
  text-align: left;
  margin: 0 auto;
}

.contentsTitle-area .TxtA span {
  font-size: 170%;
  font-weight: 500;
  letter-spacing: 2px;
  font-family: "yu-mincho-pr6n",sans-serif;
  text-wrap: balance;
  word-break: keep-all;

}

.contentsTitle-area .TxtB {
  width: 100%;
  text-align: left;
  line-height: 200%;
  margin: 0 auto;
}

.contentsTitle-area .TxtB span {
  font-size:110%;
  font-weight: 400;
  text-wrap: balance;
  word-break: keep-all;

}
.itemBox  .R-area {
  display: block;
  width: 80%;
  margin: 10% auto;
  padding: 5%;
}

@media screen and (max-width: 980px) {
  .chooseBox {
    width: 95%;
    padding: 1%;
  }
  .chooseBox text {
    width: 90%;
    margin: 10% auto;
  }
.chooseBox .text span {
  font-size: 1.3rem;
}
  .chooseBox .title span {
    font-size: 2.1rem;
  }
  .chooseBox .R-area {
    margin: 3%;
    gap: 3%;
  }
  .contentsTitle-area {
    width: 95%;
  }
  .contentsTitle-area .abc {
    width: 50px;
    height: 50px;
    margin: auto;
  }
  .contentsTitle-area .TxtA {
    text-align: left;
    margin: auto;
  }
  .contentsTitle-area .TxtA span {
    font-size: 1.8rem;
  }
  .contentsTitle-area .TxtB {
    width: 90%;
    text-align: left;
    justify-content: center;
    margin: auto;
  }
    .contentsTitle-area .TxtB span {
    font-size: 1.3rem;
  }
}

.line-picture {
  width: 90%;
  margin: auto 0;
}

.line-picture img {
  display: block;
}

.contents-block .itemBox {
  width: 85%;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  margin: 5% auto;
  background-color: #fff;
  gap: 2%;
}

.R-area .itemTxt {
  line-height: 205rem;
}
.itemBox .L-area {
  width: 100%;
  height: fit-content;
  margin: auto;
  align-items: left;
  overflow: hidden;
}

.itemBox .L-area img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;  /* 枠を埋めるようにトリミング */
  object-position: center; /* トリミング時の基準位置 */
}

.itemBox  .R-area {
  display: block;
  width: 80%;
  margin: 10% auto;
  padding: 5%;
}
@media screen and (max-width: 980px) {
.contents-block .itemBox {
  display: block;
}
.R-area .itemTxt {
  line-height: 205rem;
}
.itemBox .L-area {
  width: 100%;
  height: fit-content;
  margin: auto;
  align-items: left;
  overflow: hidden;
}

.itemBox .L-area img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;  /* 枠を埋めるようにトリミング */
  object-position: center; /* トリミング時の基準位置 */
}

.itemBox  .R-area {
  display: block;
  width: 95%;
  margin: 10% auto;
  padding: 5%;
}
}

.R-area .itemName {
  width: 100%;
  text-align: left;
  margin: 0 auto;
}

.R-area .itemName span {
  font-size: 170%;
  font-weight: 500;
  letter-spacing: 2px;
  font-family: "yu-mincho-pr6n",sans-serif;
}

.R-area .itemPrice {
  width: 100%;
  text-align: left;
  line-height: 200%;
  margin: 1% auto 2% auto;
}

.R-area .itemPrice span {
  font-size: 1.8rem;;
  font-weight: 600;
}

.R-area .itemTxt {
  width: 100%;
  text-align: left;
  line-height: 200%;
  margin: 5% auto;
}

.R-area .itemTxt span {
  font-size:1.5rem;
  font-weight: 400;
}

.R-area .itemDetail {
  display: flex;
  gap: 1%;
  margin: 0 auto 5% 0;

}

.itemDetail .detailBox {
  width: auto;
  background-color: #e6e8eb;
  border: 1px solid #1c2743;
  color: #1c2743;
  border-radius: 5px;
  padding: 1% 2%;

}

.itemDetail .detailBox  span {
  width: 100%;
  text-align: center;
  margin: auto;

  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 2px;
}

.R-area .YE-area {
  background-color: #f6f4ec;
  padding: 3% 4%; 
  margin: 4% auto;
  border-left: 2px solid #b39c6f;
}

.YE-area .title {
  color: #b39c6f;
  width: 100%;
  text-align: left;
  line-height: 200%;
  margin: 1% auto;
}

.YE-area .title span {
  font-size:1.7rem;
  font-weight: 400;
}

.YE-area .text {
  width: 100%;
  text-align: left;
  line-height: 200%;
  margin: 0 auto;
}

.YE-area .text span {
  font-size:1.5rem;
  font-weight: 400;
}

.R-area .itemBtn {
  font-size: 1.5rem;
  width: 65%;
  margin: 5% auto 2% 0;
  display: block;
  text-align: center;
  padding: 2%;
  color: #fff;
  background-color: #1c2743;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}

.R-area .itemBtn a {
  color: #fff;
}

.R-area .itemBtn:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  color: #fff;
}
.R-area .itemName span {
  font-size: 2.5rem;

}
.kara {
  margin-top: 10%;
}

.comparison-table-wrap {
  width: 70%;
  margin: auto;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background-color: #fff;
}

/* ヘッダー行を固定 */
.comparison-table thead th {
  position: sticky;
  top: 0;
  background-color: #1c2743;
  color: #fff;
  text-align: center;
  padding: 2% 4%;
  border: 1px solid #1c2743;
  font-weight: 300;
  z-index: 10;
}

/* ボディのセル */
.comparison-table tbody td {
  padding: 2% 4%;
  border: 1px solid #d8d8d8;
  color: #333;
  vertical-align: middle;
  line-height: 1.6;
}

/* 1列目(シーン)は中央寄せ、太字にして目立たせる */
.comparison-table tbody td:first-child {
  background-color: #f7f4ed;
  text-align: center;
  font-weight: bold;
  white-space: nowrap;
}

/* 3列目(おすすめモデル)のモデル名を強調 */
.comparison-table tbody td:last-child strong {
  color: #1c2743;
  font-family:"century-gothic-std",sans-serif;
}

  .comparison-table tbody td:last-child a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.comparison-table tbody td:last-child a:link,
.comparison-table tbody td:last-child a:visited,
.comparison-table tbody td:last-child a:active {
  color: #1c2743;
}

.comparison-table tbody td:last-child a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background-color: #1c2743;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.comparison-table tbody td:last-child a:hover::after {
  transform: scaleX(1);
}

.message-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
}

/* 画像側:背景矩形と画像を重ねる領域 */
.message-visual {
  position: relative;
}

/* 背景の四角形。画像より右・下にずらして"はみ出す"のがポイント */
.bg-rect {
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 18%;              /* 画像の右半分あたりから開始 */
  width: 80%;
  height: 100%;
  background: #F3EFE7;    /* クリーム系の色 */
  z-index: 1;
}

.fg-image {
  position: relative;
  z-index: 2;              /* 画像を矩形より前面に */
  width: 80%;
  display: block;
  margin: auto;
}

.message-text {
  position: relative;
  z-index: 2;
  padding: 40px 60px;
  font-size: 1.5rem ;
}
.commentBox {
  display: flex;
  width: 84%;
  gap: 2px;
  margin: 0 auto 3% 14.5%;

}
.comment-detail {
  width: auto;
  background-color: #e6e8eb;
  color: #4d5d88;
  border-radius: 5px;
  padding: 10px 30px;
}
.comment-detail span {
  width: 100%;
  text-align: center;
  margin: auto;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 2px;
}

@media screen and (max-width: 980px) {
  .commentBox {
    display: block;
    margin: 0 auto 10% 11% ;
  }
  .comment-detail {
    margin: 3% auto;
    padding: 5px;
}
}






/*===================================================
				商品一覧挿入時
===================================================*/

.item-card {
  width: 90%;
  margin: 0 5% 5% 5%;
  text-align: center;
  position: relative;
}

/*===================================================
					Footer CSS
===================================================*/
.copy {
	width: 100%;
	background-color: #153e35;
	position: absolute;
}
.copy .c_text {
	color: #ffffff;
	padding: 1%;
	text-align: center;
}
/*===================================================
			戻るボタン　CSS
===================================================*/

html {
    scroll-behavior: smooth;
}
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #1c2743;
    color: #1c2743;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    opacity: 1;               /* 初期状態は非表示 */
    transform: translateY(10px); /* お好みで、少し下から出てくる演出 */
    transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.3s ease;
}

.pagetop.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pagetop:hover {
  background-color: #fff;
  transform: translateY(-5px); /* ホバー時に少し持ち上げる */
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #1c2743;
    border-right: 3px solid #1c2743;
    transform: translateY(20%) rotate(-45deg);
}
/*===================================================
スマホ表示用調整
===================================================*/

@media screen and (max-width: 980px) {

  .chooseBox {
    padding: 1% 5% 0 0;
}

.line-picture {
  display: none;
}

.YE-area .text {
  line-height: 2.5rem;
}
.R-area .itemTxt {
  line-height: 2.5rem;
}
.message-block {
  display: block;
  width: 90%;
  margin: 0 auto;
}
.message-block {
  width: 90%;
  font-size: 1.6rem;
}
.R-area .itemName span {
  font-size: 2.0rem;
}
.message-text {
  width: 90%;
  margin: 5% auto;
  padding: 40px 1px;
  font-size: 1.2rem;
}
.R-area .itemTxt span {
  font-size:1.2rem;
}
.YE-area .title span {
  font-size: 1.5rem;
}
.YE-area .text span {
  font-size:1.2rem;
}
.R-area .itemBtn {
    margin: 5% auto 2% auto;
    font-size: 1.6rem;
    width: 85%;
}
.R-area .itemPrice span {
  font-size: 1.6rem;;
}
.comparison-table-wrap {
    width: 90%;                          /* 画面幅に収める */
    margin: 5% auto;
    overflow-x: auto;                    /* 横スクロールを有効に */
    -webkit-overflow-scrolling: touch;   /* iOSの慣性スクロール */
  }
  .comparison-table {
    min-width: 640px;                    /* 表の最低幅。これを超えた分がスクロールになる */
  }
  .comparison-table thead th,
  .comparison-table tbody td {
    padding: 12px 14px;                  /* %指定だとラッパー幅の影響を受けるためpxに */
  }
  .R-area .itemDetail {
    display: block;
  }
  .itemDetail .detailBox {
    text-align: center;
    width: 90%;
    margin: 2% auto;
  }
}