@charset "UTF-8";

/* CSS Document */
html {
    scroll-behavior: smooth;
}
body{
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", Arial, sans-serif !important;
	margin: 0;
	background-color: #eee;
}
.all{
	background-color: #fff;
	padding: 10px 20px;
}
.wrapper{
	margin: 0 auto;
	width: 620px;

}
@media screen and (max-width:700px) {
	.all{
		padding: 10px;
	}
	.wrapper{
		width: 100%;
	}
}
p{
	font-size: 19px;
	color: #000000;
	line-height: 1.5;
}
b{
	font-weight: bold;
}
.mark {
	background: linear-gradient(to bottom, transparent 0%, transparent 70%, #ffffaf 70%, #ffffaf 100%);
	height: 80%;
	vertical-align: bottom;
}
.pc{
    display: block ;
}
.sp{
    display: none ;
}
.fwB{
    font-weight: bold;
}
.taC{
	text-align: center!important;
}
.taL{
	text-align: left!important;
}

.fsS{
	font-size: 13px;
    vertical-align: bottom;
}
.fsL{
	font-size: 25px;
}
.fcR{
	color: rgb(255, 0, 0);
}
.fcB{
	color: rgb(17, 85, 204);
}
.fcP{
	color: rgb(245, 72, 159);
}
.fcK{
	color: rgb(0, 194, 201);
}
.mt0{
	margin-top: -10px !important;
}
.mtb20{
	margin: 20px 0;
}
.mt20{
	margin-top: 20px !important;
}
.mt40{
	margin-top: 40px;
}
.mb20{
	margin-bottom: 20px;
}
.mb60{
	margin-bottom: 60px;
}
.mb0{
	margin-bottom: 0!important;
}
.small {
    /*文字サイズ*/
    font-size: 12px;
    color: #999;
    text-align: right;
    /*行間調整*/
    line-height: 1.2;
    /*下側の余白*/
    margin-bottom: 1em;
  }
img {
	width: 100%;
	margin: 0 auto;
	vertical-align: bottom;
}
video{
    width: 100%;
    height: auto;
	vertical-align: bottom;
}
footer {
    font-size: 13px;
    padding: 5%;
    background: #ECECEC;
    text-align: center;
    margin-top: 10px;
}



/* こまごま追加 */
h2 {
	margin-top: 10%;
	padding: 0.5em;/*文字周りの余白*/
	color: #000;/*文字色*/
	background: #fff7e1;/*背景色*/
	border-left: solid 5px #ffa800;/*左線（実線 太さ 色）*/
  }
  @media screen and (max-width:640px) {
	h2{
		font-size: 20px;
	}
  }
  h3{
	border-bottom: double 5px #FFC778;
	font-size: 21px;
	margin-top: 8%;
  background-color: #fff7e1;
    padding: 8px;
  }
  .heading04 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 26px;
	text-align: center;
}

.heading04::before,
.heading04::after {
	content: '';
	width: 3px;
	height: 40px;
	background-color: #ffa800;
}

.heading04::before {
	margin-right: 30px;
	transform: rotate(-35deg)
}
.heading04::after {
	margin-left: 30px;
	transform: rotate(35deg)
}

  .balloon1-left  {
	position: relative;
	display: inline-block;
	margin: 1.5em 0 1.5em 15px;
	padding: 20px;
	min-width: 120px;
	max-width: 100%;
	color: #555;
	font-size: 16px;
	background: #ffedc0;
	border-radius: 10px;
  }
  
  .balloon1-left:before {
	content: "";
	position: absolute;
	top: 50%;
	left: -30px;
	margin-top: -15px;
	border: 15px solid transparent;
	border-right: 15px solid #ffedc0;
  }
  
  .balloon1-left p {
	margin: 0;
	padding: 0;
  }

  img.maru{
    width: 50px;
    margin: 0 10px 0 0;
  }

  /* 折りたたむ */
  .grad-wrap {
    position: relative;
    padding-bottom: 30px;
  }
  .grad-wrap + .grad-wrap {
    margin-top: 40px;
  }
  .grad-btn {
    z-index: 2;
    position: absolute;
    right: 0;
    bottom: 10px;
    left: 0;
    width: 148px;
    margin: auto;
    padding: .5em 0;
    border-radius: 2px;
    background: #ffa800;
    color: #fff;
    border-radius: 10px;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: .2s ease;
  }
  .grad-btn::after {
    content: "続きを見る"
  }
  .grad-btn:hover {
    opacity: 0.6;
  }
  .grad-btn .fa {
    margin-right: .5em;
  }
  .grad-item {
    position: relative;
    overflow: hidden;
    height: 150px;
  }
  .grad-item p + p {
    margin-top: 1em;
  }
  .grad-item::before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 40px; /*グラデーションで隠す範囲*/
    background: -webkit-linear-gradient(top, rgba(255,243,207,0) 0%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 50%, #ffffff 100%);
    background: linear-gradient(top, rgba(255,243,207,0) 0%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 50%, #ffffff 100%);
  }
  .grad-trigger {
    display: none;
  }
  
  .grad-trigger:checked ~ .grad-btn {
    bottom: -30px;
  }
  .grad-trigger:checked ~ .grad-btn::after {
    content: "閉じる"
  }
  .grad-trigger:checked ~ .grad-btn .fa {
    transform: rotate(180deg);
  }
  .grad-trigger:checked ~ .grad-item {
    height: auto;
  }
  .grad-trigger:checked ~ .grad-item::before {
    display: none;
  }

  /* 2 */
  .expand-wrap {
    position: relative;
    padding-bottom: 30px;
  }
  .expand-wrap + .expand-wrap {
    margin-top: 40px;
  }
  .expand-btn {
    z-index: 2;
    position: absolute;
    right: 0;
    bottom: 10px;
    left: 0;
    width: 148px;
    margin: auto;
    padding: .5em 0;
    border-radius: 10px;
    background: #ffa800;
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: .2s ease;
  }
  .expand-btn::after {
    content: "続きを見る";
  }
  .expand-btn:hover {
    opacity: 0.6;
  }
  .expand-item {
    position: relative;
    overflow: hidden;
    height: 150px;
  }
  .expand-item p + p {
    margin-top: 1em;
  }
  .expand-item::before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 40px;
    background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  }
  .expand-trigger {
    display: none;
  }
  .expand-trigger:checked ~ .expand-btn {
    bottom: -30px;
  }
  .expand-trigger:checked ~ .expand-btn::after {
    content: "閉じる";
  }
  .expand-trigger:checked ~ .expand-item {
    height: auto;
  }
  .expand-trigger:checked ~ .expand-item::before {
    display: none;
  }
  
  

  /* 比較表 */
  @media screen and (min-width:640px) {
    .sp{
        display: none;
    }
}

@media screen and (max-width:640px) {
    .sp{
        display: block;
    }
}
.tac{
    text-align: center;
}
.rankTable table {
    width: 100%;
    text-align: center;
    line-height: 1.2;
}

.rankTable {
    border: 3px solid #ffa800;
    margin-bottom: 60px;
    margin-top: 30px;
    font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

.rankTable th {
    position: sticky;
    width: 40px;
    padding: 9px 0px 9px;
    background-color: #ffa800;
    color: #fff;
    left: 0;
    border-bottom: 1px dotted #fff;
    font-size: 9px;
}

.rankTable td {
    width: auto;
    border-bottom: 1px dotted #eee;
    border-top: none;
    padding: 9px 5px 9px;
    font-size: 12px;
    position: relative;
    vertical-align: middle;
    border-right: 1px dotted #ddd;
    background: none;
}

.rankTable td:last-child {
    border-right: none;
}

.rankTable tr th+td {
    background-color: #fdffe4;
}

.rankTable table th {
    width: 19.0%;
    font-size: 13px;
}

.rankTable td {
    border-right: 1px dotted #ddd;
}

.rankTable tr {
    border-bottom: 1px dotted #ddd;
}


.rankTable tr:last-child td {
    border-bottom: none;
}

@media screen and (max-width:768px) {
    .rankTable table {
        width: 550px;
    }

    .rankTable {
        overflow-x: scroll;
    }
}

.rankTable table th {
    vertical-align: middle;
    width: 13.0%;
    font-size: 12.5px;
    z-index: 88;
}

img.table_icon {
    width: 99%;
    margin-top: 5px;
}

.sogood {
    font-size: 35px;
    color: #ff8a1d;
}

.good {
    font-size: 34px;
    color: #ffbb00;
    font-weight: normal;
}

.bad {
    font-size: 37px;
    font-weight: 300;
    color: #747474;
}

.soso {
    font-size: 34px;
    font-weight: bold;
    color: #0a9b00;
}
.star{
	color: #ff6600;
}


.t_btn {
    display: block;
    width: 95%;
    background: #0cc300;
    padding: 7px 5px;
    border-radius: 5px;
    margin-bottom: 10px;
    box-shadow: 0px 7px 0px 0 #087e00;
}
.t_btn02 {
    display: block;
    width: 95%;
    background: #ff6600;
    padding: 7px 5px;
    border-radius: 5px;
    margin-bottom: 10px;
    box-shadow: 0px 7px 0px 0 #a72100;
}
.t_btn02,.t_btn{
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}


/* 画像表示 */    
/* 親コンテナ */
.gallery {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 10px auto;
	max-width: 600px;
  }
  
  /* 大きな画像のコンテナ */
  .gallery__display {
	position: relative;
	width: 100%;
	padding-top: 66.666%; /* アスペクト比 3:2 */
	margin-bottom: 10px;
  }
  
  /* 表示される大きな画像 */
  .gallery__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	pointer-events: none; /* 非表示の画像をクリック不可に */
	transition: opacity 0.3s ease-in-out;
  }
  
  /* ラジオボタンを隠す */
  .gallery__selector {
	display: none;
  }
  
  /* チェックされた画像を表示 */
  .gallery__selector:checked + .gallery__img {
	opacity: 1;
	pointer-events: auto; /* 表示された画像をクリック可能に */
  }
  
  /* サムネイルのコンテナ */
  .gallery__thumbnails {
	display: flex;
	justify-content: center;
	gap: 10px;
	overflow-x: auto; /* 水平スクロール可能にする */
	white-space: nowrap; /* 直前の画像が続いて表示される */
	max-width: 100%; /* スマホサイズでは100%幅に制限 */
  }
  
  /* サムネイル画像 */
  .gallery__thumb {
	cursor: pointer;
	display: inline-block;
	transition: box-shadow 0.3s ease-in-out;
  }
  
  .gallery__thumb img {
	width: 60px;
	height: 60px;
	object-fit: cover;
  }
  
  /* チェックされたサムネイルに枠線を付与 */
  .gallery__selector:checked ~ .gallery__thumbnails label {
	box-shadow: 0 0 0 3px #0be2f6;
	border-radius: 5px; /* 枠を少し丸める */
  }
  
  /* フレックス */
  .fle{
	display: flex;
	width: 80%;
	margin: 0 auto;
	margin-bottom: 30px;
  }
  .con{
	border-radius: 10px;
	background-color: #63ca5b;
	color: #fff;
	width: 30%;
	margin: 0 auto;
	padding: 10px;
	text-align: center;
	font-weight: bold;
  }
  .no{
	background-color: #bbbbbb;
	font-weight: 300;
	text-decoration: line-through;
  }
  @media screen and (max-width:768px) {
	.fle{
		width: 100%;
		font-size: 14px;
	}
  }

  /* 光るボタン */
  .shiny-btn1 {
    display: block;
    position: relative;
    width: 80%;/*ボタンの幅*/
    padding: 10px 0;
    margin: 30px auto;
    overflow: hidden;
}
.shiny-btn1:hover {
    text-decoration: none;
    color: #fff;
}
.shiny-btn1::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1 3s ease-in-out infinite;
}
@-webkit-keyframes shiny-btn1 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}


/* 口コミ */
.voice{
	border: 2px solid #dddddd;
	border-radius: 10px;
	padding: 3%;
}
.ttl{
	font-size: 20px;
	font-weight: bold;
	padding-bottom: 5px;
	border-bottom: 2px dotted #dddddd;
}
.v_fle{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.v_fle img{
	width: 23%;
	margin: 0 10px 0 0;
}

.cta{
	border-radius: 50px;
	background-color: #059e4b;
	width: 75%;
	padding: 10px;
	text-align: center;
	margin: 0 auto;
}
.cta a{
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	font-size: large;
}

.sp {
  display: none;
}
.pc {
  display: block;
}
@media screen and (max-width: 767px) {
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
}