@charset "UTF-8";

.contents {
    background: #FFF;
}

#minnanohonne {
  color: #283d5e;
  font-family: "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", "YuGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#minnanohonne {
    background: #FFF;
    
}
#minnanohonne img {
	display: block;
	margin: 0 auto ;
	max-width: 100%;
	width: auto;
}
#minnanohonne .main2025{
    width: 100%;
}
#minnanohonne .minnanohonne_btn {
	background-color: #5fc0f2;
	border-radius: 100vh;
	color: #fff;
	font-size: min(3.3vw, 16px);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1;
	margin: 5% auto 6%;
	padding: 3.3% 5%;
	position: relative;
	display: block;
	padding-left: 12px;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s;
	width: 53.8%;
}

#minnanohonne .minnanohonne_btn::after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 9px;
	border-color: transparent transparent transparent #fff;
	position: absolute;
	top: 0;
	right: 6%;
	bottom: 0;
	margin: auto;
	transform: rotate(0deg);
}

#minnanohonne .head_area {

}

#minnanohonne .head_img{
    position: relative;    
}
#minnanohonne .main_ttl {
position: absolute;
    width: 76%;
    margin: 0 auto;
    right: 0;
    left: 0;
    top: 7%;
}

#minnanohonne .main_icon {
/*    position: absolute;
    width: 86%;
    margin: 0 auto;
    right: 0;
    left: 0;
    bottom: 16%;*/
}
#minnanohonne .icon-plane {
    position: absolute;
    right: 17%;
    width: 23%;
    bottom: 36%;    
    
}   
#minnanohonne .icon-nimotu {
    position: absolute;
    right: 9%;
    width: 16%;
    bottom: 12%;    
}

#minnanohonne .icon-lens {
    position: absolute;
    left: 7%;
    width: 20%;
    bottom: 23%;

}

#minnanohonne .lead_box{
    background:url(../img/main_en.png) center top;
    background-size: contain;
    background-repeat: no-repeat;
}
#minnanohonne .lead_p{
    background: #FFFFFF;
    border: 3px solid #5fc8f0;
    width: 76%;
    font-size: min(4vw, 15px);
    margin: 0 auto;
    letter-spacing: 1.5px;
    line-height: 2;
    padding: 5% 6%;
    font-weight: 500;
    border-radius: 1em;
}


#minnanohonne .moji_pi {
    color: #e75e9b;
}


#minnanohonne .content_area {
}

#minnanohonne .lead_btn {
  display: flex;
  justify-content: center;
  gap: 4%; 
  margin: 7% auto; 
  max-width: 100%;
  padding: 0 5%; 
  box-sizing: border-box;
}

#minnanohonne .lead_btn img{
  display: block;
  max-width: 100%;
  height: auto;
  transition: transform 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
}

#minnanohonne .survey_section {
    background: #5fc8f0;
    padding: 20% 0 10%;
}

#minnanohonne .survey_howa {
    background: #FFF;
    width: 90%;
    position: relative;
    border-radius: 1em;    
    margin: 0 auto;
}
#minnanohonne .survey_section h2 {
    position: absolute;
    top: -2.5em;
    left: 50%;
    width: 76%;
    transform: translateX(-50%);
    background-color: #283d5e;
    color: #fff;
    padding: 2%;
    letter-spacing: 1px;
    border-radius: 0.6em;
    border: solid 0.3em;
    font-size: min(3.6vw, 19px);
    font-weight: bold;
    text-align: center;
    line-height: 1.8;
}


#minnanohonne .survey_results {
	padding: 10% 5% 10%;
	position: relative;
}

#minnanohonne .survey_item {
    border-bottom: 0.3em dotted #5fc8f0;
}

#minnanohonne .survey_item2 {
    border-bottom: 0.3em dotted #5fc8f0;
    display: flex;
    justify-content: center;
    padding: 5% 0;
}
#minnanohonne .survey_item3 {
    display: flex;
    justify-content: center;
    padding: 5% 0;
}

#minnanohonne .hase_ri{
	border-right: 0.3em dotted #5fc8f0;
}

#minnanohonne .survey_img {
	width: 64%;
    margin: 7% auto 7%;	
}

#minnanohonne .survey_img2 {
    width: 70%;
    margin: 5% auto;
}

#minnanohonne .survey_img3 {
    width: 64%;
    margin: 5% auto;
}
#minnanohonne .icon_wi {
    width: 24vw;
    max-width: 80px;
    height: auto;
    margin-right: 4vw;
    flex-shrink: 0;
}

#minnanohonne .text_block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
}

#minnanohonne .icon_label {
    font-weight: bold;
    color: #e75e9b;
    font-size: min(6vw, 24px);
    margin: 0 0 1vw;
    line-height: 1.2;
}

#minnanohonne .suu_wi {
    width: 48%;
    height: auto;
}


#minnanohonne .survey_kabu {
    background: #edfaff;
    border-radius: 1em;
}

#minnanohonne .kabu_p{
    font-size: min(3.4vw, 14px);
    margin: 0 auto;
    letter-spacing: 1px;
    line-height: 2;
    padding: 6% 6%;
    font-weight: 500;
}

#minnanohonne .img_kabu {
    position: absolute;
    width: 32%;
    right: 0%;
    bottom: -2%;
}

#minnanohonne .fuan_section {
    background: #FFF;
    padding: 6% 0 9%;
}

#minnanohonne .headline-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2%;
  margin: 4% 0;
  position: relative;
  text-align: center;
  flex-wrap: wrap;
}

#minnanohonne .headline-block::before,
#minnanohonne .headline-block::after {
    content: '';
    display: inline-block;
    width: 3%;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
}

#minnanohonne .headline-block::before {
  background-image: url('../img/sura_hida.png'); 
  margin-right: 3%;
}

#minnanohonne .headline-block::after {
  background-image: url('../img/sura_migi.png'); 
  margin-left: 3%;
}

#minnanohonne .headline-text {
    font-size: min(4.6vw, 23px);
    font-weight: bold;
    margin: 0;
    letter-spacing: 1.5px;
    padding: 0;
    display: inline;
}

#minnanohonne .headline-text .brand {
    color: #283d5e;
}

#minnanohonne .headline-text .highlight {
    color: #e85e9f;
    margin-right: -5px;
}



#minnanohonne .fuan_results {
    padding: 1% 5% 1%;
    position: relative;
    background: #edfaff;
    width: 80%;
    margin: 0 auto;
    border-radius: 1em;
}

#minnanohonne .fuan_item {
    border-bottom: 0.3em dotted #5fc8f0;
}

#minnanohonne .fuan_img {
	width: 90%;
    margin: 7% auto 7%;	
}

#minnanohonne .fu_nobo {
    border-bottom: none;
}

#minnanohonne .kaiteki-text {
    text-align: center;
    position: relative;
    font-weight: normal !important;
    letter-spacing: 1px;
    padding-bottom: 5%;
    font-size: min(3.6vw, 16px);
    color: #283d5e;
    line-height: 1.6;
}

#minnanohonne .kaiteki-text h3 {
    display: inline-block;
    position: relative;
    font-weight: 500;    
    padding-bottom: 5%;
    margin: 0;
    background: url(/special/minnanohonne/img/fukidashi.png) no-repeat center bottom;
    background-size: contain;
}

#minnanohonne .bnr_guide {
    width: 90%;
    margin: 0 auto 12%;
}


#minnanohonne .kaeru_section {
    background: #5fa7f0;
    padding: 20% 0 10%;
    margin: 0 auto 8%;
}

#minnanohonne .kaeru_howa {
    background: #FFF;
    width: 90%;
    position: relative;
    border-radius: 1em;    
    margin: 0 auto;
}

#minnanohonne .kaeru_section h2 {
    position: absolute;
    top: -2.5em;
    left: 50%;
    width: 66%;
    transform: translateX(-50%);
    background-color: #283d5e;
    color: #fff;
    padding: 2%;
    letter-spacing: 1px;
    border-radius: 0.6em;
    border: solid 0.3em;
    font-size: min(3.6vw, 19px);
    font-weight: bold;
    text-align: center;
    line-height: 1.8;
}
#minnanohonne .kaeru_results {
    padding: 10% 5% 1%;
    position: relative;  
}

#minnanohonne .kaeru_p {
    font-size: min(3.4vw, 14px);
    text-align: center;
    margin: 5% auto 6%;
    letter-spacing: 1px;
    font-weight: 500;
}

#minnanohonne .kaeru_box{
    position: relative;
}
#minnanohonne .kaeru_box2{
    position: relative;
}
#minnanohonne .kaeru_box3{
    position: relative;
}

#minnanohonne .kaeru_icon_title{
    margin: 0 auto 5%;
    width: 90%;
}
#minnanohonne .kaeru_icon_title2{
    margin: 0 auto 5%;
    width: 90%;
}
#minnanohonne .kaeru_icon_title3{
    margin: 0 auto 5%;
    width: 90%;
}

#minnanohonne .kaeru_reason_list{
    position: absolute;
    z-index: 50;
    left: 25%;
    top: 16%;
}
#minnanohonne .kalist2{
    position: absolute;
    z-index: 50;
    left: 25%;
    top: 10%;
}
#minnanohonne .kalist3{
    position: absolute;
    z-index: 50;
    left: 25%;
    top: 9%;
}
#minnanohonne .kaeru_reason_list ul {
    padding-left: 1em;
    list-style-type: none;
}

#minnanohonne .kaeru_reason_list li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 0.6em;
    font-size: min(3vw, 14px);
    font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 1.6;
}

#minnanohonne .kaeru_reason_list li::before {
    content: '■';
    position: absolute;
    left: 0;
    color: #283d5e;
    font-size: 0.8em;
    top: 0.2em;
}

#minnanohonne .kaeru_reason_list li span {
    color: #e75b88;
    font-weight: bold;
}

#minnanohonne .kaeru_reason_list li:last-child {
    margin-bottom: 0;
}


#minnanohonne .kaerukabu_p {
    font-size: min(3.4vw, 14px);
    margin: 0 auto;
    letter-spacing: 1px;
    line-height: 2;
    padding: 2% 6% 12%;
    font-weight: 500;
}


#minnanohonne .img_kabu2{
    position: absolute;
    width: 40%;
    right: 2%;
    bottom: -1.6%;  
}


#minnanohonne .hikaku-text {
    text-align: center;
    position: relative;
    font-weight: normal !important;
    letter-spacing: 1px;
    padding-bottom: 5%;
    font-size: min(3vw, 14px);
    color: #283d5e;
    line-height: 1.6;
}

#minnanohonne .hikaku-text h3 {
    display: inline-block;
    position: relative;
    font-weight: 500;    
    padding-bottom: 5%;
    margin: 0;
    background: url(/special/minnanohonne/img/fukidashi2.png) no-repeat center bottom;
    background-size: contain;
}




/* タブコンテンツ部分
------------------------------------ */
#minnanohonne .js_tab_group {
    margin: 0 auto;
    padding: 0;
    width: 94%;
}

#minnanohonne .tab_list {
    align-items: end;
    display: flex;
    justify-content: space-between;
    letter-spacing: 0;
    margin: 0;
    padding: 0;
    position: relative;
}

#minnanohonne .tab {
    align-items: center;
    background: #f2f8ff;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 20px 0 0;
    padding: 0;
    width: 32%;
}

#minnanohonne .tab.tab_text {
    /*color: #283d5e;*/
    font-size: min(4vw, 18px);
    line-height: 1.5;
    padding: 4% 0 3%;
    border-radius: 0.5em 0.5em;
    text-align: center;
    margin: 0 0 1%;
    font-weight: bold;    
}

#minnanohonne .tab.tab_text span {
    color: #fff71a;
    display: block;
    font-size: min(4vw, 18px);
}

#minnanohonne .tab.tab_text em {
    color: #fff;
    display: block;
    font-size: min(4vw, 18px);
    font-style: normal;
}

#minnanohonne .tab:hover {
    opacity: 0.7;
}

#minnanohonne .tab.is_active {
    background: #5fa7f0;
    border-bottom: none;
    margin: 0;
    padding: 4% 0;
    border-radius: 0.5em 0.5em 0 0;
}

#minnanohonne .tab.tab_text.is_active {
    color: #FFF;
    font-size: min(4vw, 18px);
    line-height: 1.5;
    position: relative;
    z-index: 2;
    width: 32%;
    padding: 4% 0 4%;
}

#minnanohonne .tab.is_active.tab_text.is_active span {
    color: #283d5e;
    font-size: min(4vw, 18px);
}

#minnanohonne .tab.is_active.tab_text.is_active em {
    color: #283d5e;
    font-size: min(4vw, 18px);
    font-style: normal;
}

#minnanohonne .tab.is_active:hover {
    opacity: 1;
}

/* 商品部分
------------------------------------ */
#minnanohonne .js_tab_contents {
    background: #5fa7f0;
    /*border: solid 2px #524f4a;*/
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 0 5%;
    position: relative;
    position: relative;
    width: 100%;
}

#minnanohonne .js_tab_panel {
    left: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    width: 100%;
}

#minnanohonne .js_tab_panel.is_active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

#minnanohonne .syouhin_box_wrap {
    display: block;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 15% auto 0;
    width: 90%;
    justify-content: center;
}

#minnanohonne .syouhin_name {
    color: #283d5e;
    font-size: min(4.4vw, 20px);
    letter-spacing: 0.15em;
    margin: 2% auto 2%;
    font-weight: bold;
    text-align: center;
}

#minnanohonne .syouhin_img {
    margin: 5% auto 0;
    max-width: 100%;
    width: 85%;
    position: relative;
}

#minnanohonne .syouhin_icon {
    position: absolute;
    width: 19%;
    top: 5%;
    left: 9%;

}

#minnanohonne .syouhin_img img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    width: auto;
    padding: 5% 0 0;    
}

#minnanohonne .syouhin_box_num {
    color: #283d5e;
    font-size: 4.2vw;
    letter-spacing: 0.15em;
    margin: 20px auto 0;
    text-align: center;
}

#minnanohonne .syouhin_box_pricewrap {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

#minnanohonne .syouhin_box_price1 {
    background: #FFF;
    color: #283d5e;
    font-size: min(3vw, 14px);
    line-height: 1.2;
    font-weight: bold;
    padding: 1% ;
    border: solid 0.2em;
    margin: 0 10px 0 0;
    text-align: center;
}

#minnanohonne .check_fco_num .syouhin_box_price1 {
    background: #FFF;
    color: #283d5e;
    font-size: min(2.8vw, 13px);
    line-height: 1.2;
    font-weight: bold;
    padding: 1%;
    border: solid 0.2em;
    margin: 0 3% 0 0;
    text-align: center;
}


#minnanohonne .syouhin_box_price2 {
    color: #283d5e;
    font-size: min(8vw, 34px);
    font-weight: 700;
}

#minnanohonne .check_fco_num .syouhin_box_price2 {
    color: #283d5e;
    font-size: min(5.6vw, 27px);
    font-weight: 700;
    letter-spacing: 0px;
}

#minnanohonne .syouhin_box_price_devide {
    color: #283d5e;
    font-size: min(4vw, 18px);
    margin: 1% auto 0;
    letter-spacing: 1px;
    font-weight: bold;
    text-align: center;
}

#minnanohonne .syouhin_pointwrap {
    display: flex;
    justify-content: center;
    position: relative;
}

#minnanohonne .syouhin_point {
    background: #fff;
    border: solid 1px #283d5e;
    display: inline-block;
    font-size: 3vw;
    font-weight: 500;
    left: 0;
    letter-spacing: 0.18em;
    margin: 10px auto 0;
    max-width: 100%;
    padding: 5px 8px;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

#minnanohonne .syouhin_point span:first-of-type {
    margin: 0;
    white-space: nowrap;
}

#minnanohonne .syouhin_point span:nth-child(2) {
    margin: 0;
    white-space: nowrap;
}

#minnanohonne .syouhin_point {
    opacity: 1;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

#minnanohonne .syouhin_point {
    opacity: 1;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}



/* スペック
--------------------------------------- */
#minnanohonne .goods_inner {
    margin: 0 auto;
    max-width: 500px;
    width: 100%;
}

#minnanohonne .goods_flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

#minnanohonne .goods_data_title_blank {
    width: 95px;
}

#minnanohonne .goods_data_title {
    max-width: 240px;
    width: 48%;
    font-size: 2.9vw;
    margin: 0;
    padding: 6px 0;
    text-align: center;
    color: #fff;
    background: #848080;
    font-weight: 400;
}

#minnanohonne .goods_flex:last-of-type {
    border-bottom: none;
}

#minnanohonne .goods_flex .th {
    width: 100%;
    padding: 10% 0 0;
    font-size: 2.9vw;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1;
}

#minnanohonne .goods_flex .th.bc {
    width: auto;
    padding: 10% 0 0;
}

#minnanohonne .goods_flex .td_wrap {
    display: flex;
    justify-content: space-between;
    margin: 5% auto 0;
    max-width: 100%;
    width: 100%;
}

#minnanohonne .goods_flex .td {
    max-width: 240px;
    width: 48%;
    font-size: 3vw;
    padding: 0;
}

#minnanohonne .goods_flex .r_eye,
#minnanohonne .goods_flex .l_eye {
    font-size: 1.4rem;
}

#minnanohonne .goods_flex .goods_select_wrap {
    position: relative;
    z-index: 2;
    border-radius: 0;
    background: transparent;
    width: auto;
    margin: 5px 0;
    border: solid 1px #524f4a;
}

#minnanohonne .goods_flex .goods_select_wrap::after {
    display: none;
}

#minnanohonne .goods_flex select {
    height: 40px;
    background: #fff;
    text-align: center;
    border-radius: 0;
    width: 100%;
    padding: 0 3%;
    color: #000000;
    font-size: 2.9vw;
    letter-spacing: 0.02em;
    appearance: none;
    outline: 0;
    z-index: 1;
    border: none;
}

#minnanohonne .goods_flex select::-ms-expand {
    display: none;
}

#minnanohonne .goods_flex select.err_msg {
    background: #fff2f2;
    color: #f54141;
}

#minnanohonne .goods_flex .goods_data_value {
    text-align: center;
    display: block;
    padding: 10% 5%;
    line-height: 1;
    font-size: 2.9vw;
    letter-spacing: 0.02em;
    background: #fff;
}

#minnanohonne .goods_err_msg {
    color: #f54141;
    display: block;
    font-size: 1.4rem;
}

#minnanohonne .goods_btn_wrap {
    align-items: center;
    display: flex;
    justify-content: space-between;
    position: relative;
}

#minnanohonne .goods_cart_btn {
    margin: 0 auto;
    width: 100%;
}

#minnanohonne .org-btn {
    background: #888888;
    border: none;
    border-radius: 0;
    color: #fff;
    display: block;
    font-size: 15px;
    font-weight: 400;
    height: 50px;
    margin: 10% auto 0;
    text-align: center;
    width: 100%;
}

#minnanohonne .syouhin_note {
    color: #727272;
    font-size: 2.6vw;
    margin: 2% auto 8%;
    text-align: center;
}

#minnanohonne .item_btn {
    background: #e75e9b;
    color: #fff;
    display: block;
    font-size: min(4vw, 19px);
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 4% auto;
    border-radius: 10vw;
    padding: 2% 0;
    position: relative;
    text-align: center;
    transition: all 0.3s;
    width: 70%;
}
#minnanohonne .item_btn:hover {
	opacity: 0.6;
}
#minnanohonne .item_btn:hover::after {
    border-right: 3px solid #fff;
    border-top: 3px solid #fff;
	content: "";
	height: 5px;
	position: absolute;
	right: 7%;
	top: 41%;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: right 0.2s ease-in-out;
	width: 5px;
}
#minnanohonne .item_btn::after {
    border-right: 3px solid #fff;
    border-top: 3px solid #fff;
    content: "";
    height: 5px;
    position: absolute;
    right: 8%;
    top: 41%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: right 0.2s ease-in-out;
    width: 5px;
}
#minnanohonne .howa_ba{
    background: #FFF;
    width: 90%;
    padding: 0 0 3%;
    margin: 6% auto 0;
}


#minnanohonne .check_fco_num .item_btn {
    background: #e75e9b;
    color: #fff;
    display: block;
    font-size: min(2.8vw, 14px);
    font-weight: bold;
    letter-spacing: 0.5px;
    margin: 4% auto;
    border-radius: 10vw;
    padding: 5% 0 4%;
    position: relative;
    text-align: center;
    transition: all 0.3s;
    width: 78%;
}
#minnanohonne .check_fco_num .item_btn:hover {
	opacity: 0.6;
}

#minnanohonne .check_fco_num .item_btn::after {
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    content: "";
    height: 4px;
    position: absolute;
    right: 9%;
    top: 40%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: right 0.2s ease-in-out;
    width: 4px;
}


#minnanohonne .check_fco_num .item_btn:hover::after {
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    content: "";
    height: 4px;
    position: absolute;
    right: 9%;
    top: 40%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: right 0.2s ease-in-out;
    width: 4px;
}

#minnanohonne .wa90  {
    width: 90%;
    margin: 0 auto;
}


@media screen and (min-width: 767px) {
	#minnanohonne .tab:before{
		width:7px;
		height:7px;
	}
	.custom-dropdown {
		top: 13%;
	}
	.set-badge img {
		width:50%;
		margin: 0 ;
	}
    
    
    #minnanohonne .kaeru_reason_list{
        left: 28%;
        top: 19%;
    }
    #minnanohonne .kalist2{
        left: 28%;
        top: 13%;
    }
    #minnanohonne .kalist3{
        left: 28%;
        top: 11%;
    }
}


/* アニメーション用追加 */
#minnanohonne .main_ttl {
    opacity: 0;
    transform: scale(0.8);
    animation: bounceIn 1.2s ease-out forwards; /* 終了後の状態を保持 */
    animation-delay: 0.3s;
}

#minnanohonne .main_icon {
    opacity: 0;
    animation: fadeInIcon 1.0s ease-out forwards; 
    animation-delay: 1.8s; 
}


#minnanohonne .moji_pi {
    opacity: 0; 
    transform: translateY(0px); 
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;    
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    60% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes fadeInIcon {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/* JavaScriptで要素がビューポートに入ったときに付与するクラス */
#minnanohonne .moji_pi.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*#minnanohonne .lead_btn {
    opacity: 0; 
    transform: translateY(30px); 
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

#minnanohonne .lead_btn.is-visible {
    opacity: 1;
    transform: translateY(0);
}

#minnanohonne .lead_btn h2:nth-child(1) {
    transition-delay: 0.1s;
}
#minnanohonne .lead_btn h2:nth-child(2) {
    transition-delay: 0.2s; 
}*/

#minnanohonne .lead_btn h2 {
  opacity: 0; 
  transition: transform 0.3s ease-out;
}

#minnanohonne .lead_btn h2:hover,
#minnanohonne .lead_btn h2:active {
  transform: scale(1.05) translateY(-5px);
}

#minnanohonne .lead_btn.is-visible h2:first-child {
  animation: slide-in-left 0.8s forwards cubic-bezier(0.25, 1, 0.5, 1);
}

#minnanohonne .lead_btn.is-visible h2:last-child {
  animation: slide-in-right 0.8s forwards cubic-bezier(0.25, 1, 0.5, 1);
  animation-delay: 0.2s;
}
@keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  70% {
    opacity: 1;
    transform: translateX(10px); /* 少し行き過ぎる */
  }
  100% {
    opacity: 1;
    transform: translateX(0); /* 本来の位置に戻る */
  }
}

/* @keyframes 右からのスライドイン（バウンド付き） */
@keyframes slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  70% {
    opacity: 1;
    transform: translateX(-10px); /* 少し行き過ぎる */
  }
  100% {
    opacity: 1;
    transform: translateX(0); /* 本来の位置に戻る */
  }
}
/* --- アニメーション共通 --- */
@keyframes zoomFade {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


/* --- 各画像にズームフェード --- */
#minnanohonne .survey_img,
#minnanohonne .survey_img2,
#minnanohonne .survey_img3 {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

#minnanohonne .survey_img.is-visible,
#minnanohonne .survey_img2.is-visible,
#minnanohonne .survey_img3.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* タイトルのアニメーション */
#minnanohonne .headline-text {
    opacity: 0;
    /* 最初は少しぼかした状態にする */
    filter: blur(5px);
    /* 1.5秒かけてアニメーションさせる */
    transition: opacity 1s ease-out, filter 1s ease-out;
}

/* is-visible が付いたらアニメーション開始 */
#minnanohonne .headline-text.is-visible {
    opacity: 1;
    /* ぼかし効果をなくして、くっきり表示 */
    filter: blur(0);
}


/* 共通アニメーション：下からスライド＋フェード */
#minnanohonne .kaeru_icon_title img,
#minnanohonne .kaeru_icon_title2 img,
#minnanohonne .kaeru_icon_title3 img,
#minnanohonne .kaeru_reason_list {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

#minnanohonne .kaeru_icon_title img.is-visible,
#minnanohonne .kaeru_icon_title2 img.is-visible,
#minnanohonne .kaeru_icon_title3 img.is-visible,
#minnanohonne .kaeru_reason_list.is-visible,
#minnanohonne .kalist2.is-visible,
#minnanohonne .kalist3.is-visible {
  opacity: 1;
  transform: translateY(0);
}/* 各アイコンの基本スタイル（位置調整用） */

/* アニメーションの初期状態（最初は非表示） */
#minnanohonne .icon-plane,
#minnanohonne .icon-nimotu,
#minnanohonne .icon-lens {
    opacity: 0;
}

/* 1. 飛行機のアニメーション */
#minnanohonne .icon-plane {
    /* 1.2秒かけて、0.2秒後にアニメーション開始 */
    animation: fly-in 1.2s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-delay: 0.2s;
}

/* 2. 荷物のアニメーション */
#minnanohonne .icon-nimotu {
    /* 1秒かけて、1.0秒後にアニメーション開始 */
    animation: drop-in 1s forwards cubic-bezier(0.68, -0.55, 0.27, 1.55);
    animation-delay: 1.0s;
}

/* 3. コンタクトレンズのアニメーション */
#minnanohonne .icon-lens {
    /* 0.8秒かけて、1.5秒後にアニメーション開始 */
    animation: pop-out 0.8s forwards ease-out;
    animation-delay: 1.5s;
}


/* --- アニメーションの動きの定義 --- */

/* @keyframes 飛行機が飛んでくる動き */
@keyframes fly-in {
    from {
        opacity: 0;
        /* 画面の右上外から飛んでくる */
        transform: translateX(200px) translateY(-50px) rotate(10deg);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateY(0) rotate(0);
    }
}

/* @keyframes 荷物が落ちてきてバウンドする動き */
@keyframes drop-in {
    from {
        opacity: 0;
        /* 上空から回転しつつ落下 */
        transform: translateY(-200px) rotate(20deg);
    }
    70% {
        transform: translateY(0) rotate(0); /* 着地 */
    }
    85% {
        transform: translateY(-10px); /* バウンド */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* 静止 */
    }
}

/* @keyframes レンズがポンッと現れる動き */
@keyframes pop-out {
    from {
        opacity: 0;
        /* 小さい状態から */
        transform: scale(0.3);
    }
    to {
        opacity: 1;
        /* 本来のサイズで表示 */
        transform: scale(1);
    }
}


/* === シンプルフェードイン・アニメーション設定 === */

/* カテゴリーボックスの初期状態 */
.kaeru-box {
  /* 最初は透明にして、少しだけ下に配置 */
  opacity: 0;
  transform: translateY(15px);
  
  /* 1秒かけて透明度と位置を変化させる */
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* 2つ目のボックスは0.2秒遅れて開始 */
.kaeru-box:nth-of-type(2) {
  transition-delay: 0.2s;
}

/* 3つ目のボックスは0.4秒遅れて開始 */
.kaeru-box:nth-of-type(3) {
  transition-delay: 0.4s;
}


/* .is-visibleクラスが付いたら、本来の見た目に戻す */
.kaeru-box.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* sp.css */

/* --- .fuan_item のスタイルを修正 --- */


#minnanohonne .fuan_item {
    border-bottom: 0.3em dotted #5fc8f0; 
    overflow: hidden; 
}
#minnanohonne .fu_nobo {
    border-bottom: none;
}

/* sp.css */

/* --- 新しいキーフレームアニメーション（変更なし） --- */
@keyframes itemDropIn {
    from {
        opacity: 0;
        transform: translateY(-50px); /* 上から落ちてくる */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ▼▼▼ アニメーションを h4 タグに適用 ▼▼▼ */
#minnanohonne .fuan_item h4 {
    opacity: 0; /* アニメーション前の状態 */
}

#minnanohonne .fuan_item.is-visible h4 {
    /* is-visibleクラスを持つ親の中のh4をアニメーションさせる */
    animation: itemDropIn 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

#minnanohonne .img_kabu,
#minnanohonne .img_kabu2 {
  opacity: 0;
  /* 弾むような動きを表現するcubic-bezier */
  transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 左の画像は小さくして少し左に回転 */
#minnanohonne .img_kabu {
  transform: scale(0.5) rotate(-10deg);
  /* 回転の中心を左下にする */
  transform-origin: bottom left;
}

/* 右の画像は小さくして少し右に回転 */
#minnanohonne .img_kabu2 {
  transform: scale(0.5) rotate(10deg);
  /* 回転の中心を右下にする */
  transform-origin: bottom right;
  transition-delay: 0.2s;
}


/* アニメーション開始（is-animatedクラスが付いたら） */
#minnanohonne .img_kabu.is-animated,
#minnanohonne .img_kabu2.is-animated {
  opacity: 1;
  /* 最終的に元のサイズと角度に戻る */
  transform: scale(1) rotate(0deg);
}