@charset "utf-8";

/* ==================================================
PC
================================================== */

/* ========== トップページ ========== */

/* 非表示 */
#footstep_wrap {
	display: none !important;
}

.side_fixed_btn a{
        background-color: #fff;
        border-radius: 20px 0 0 20px;
        color: #606060;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 20px 12px;
        text-decoration: none;
        writing-mode: vertical-rl;
        position: fixed;
        right: 0px;
        top: 30vh;
        z-index: 3;
        filter: drop-shadow(0 0 4px rgba(0, 0, 0, .1));
}
.side_fixed_btn a:hover{
        opacity: .8;
}
.side_fixed_btn a::before{
        content: '';
        width: 46px;
        height: 32px;
        background-image: url("/img/iju/side_fixed_btn_icon.png");
        background-repeat: no-repeat;
        background-size: contain;
        display: block;
}


/* スライドショー */
.top_main_slider{
    position: relative;
}
.top_main_slider .slider_txt{
    color: #fff;
    /*filter: drop-shadow(0 0 3px rgba(0, 0, 0, .8));*/
    font-feature-settings: "palt";
    font-size: clamp(16px, 8vw, 40px);
    letter-spacing: .2em;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding-bottom: 40px;
    text-align: center;
    width: fit-content;
    height: fit-content;
    z-index: 2;
}
.top_main_slider .slider_txt img{
    margin-inline: auto;
    width: 90%;
    height: auto;
    max-width: 555px;
}

.top_main_slider .swiper-slide span{
    width: 100%;
    aspect-ratio: 5 / 2;
    display: block;

}
.top_main_slider .swiper-slide img {
    width: 100vw !important;
    height: 100%;
    object-fit: cover !important;
    max-width: 100vw !important;
}
.top_main_slider .swiper-pagination{
    box-sizing: border-box;
    text-align: right !important;
    padding: 10px 50px 10px 0 !important;
}
.top_main_slider button.swiper-button-prev,
.top_main_slider button.swiper-button-next {
    display: none;
}

button.swiper-button-start,
button.swiper-button-stop {
    width: 30px !important;
    height: 30px !important;
    top: auto !important;
    bottom: 2px !important;
    background: #fff !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #ff4a3d !important;
    border-radius: 50%;
    font-size: 0;
    display: block;
}

:where(button.swiper-button-start,button.swiper-button-stop)::after{
    background-color: #ff4a3d !important;
}

button.slide-button-prev,
button.slide-button-next{
    width: 68px;
    height: 68px;
    background: #fff;
    border: 4px solid #ff4a3d;
    border-radius: 50%;
    font-size: 0;
    display: block;
    position: absolute;
    top: calc(48% - 68px);
    z-index: 2;
}
button.slide-button-prev{
    left:-34px;
}
button.slide-button-next{
    right:-34px;
}

button.slide-button-next::before,
button.slide-button-prev::before{
    content: '';
    width: 28px;
    height: 2px;
    background-color: #ff4a3d;
    position: absolute;
    right: 16px;
    top: 0;
    bottom: 0;
    margin: auto;
}
button.slide-button-next::after,
button.slide-button-prev::after {
    content: '';
    width: 12px;
    height: 12px;
    border-top: solid 2px #ff4a3d;
    border-right: solid 2px #ff4a3d;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
button.slide-button-next::after {
    right: 16px;
    transform: rotate(45deg);
}
button.slide-button-prev::after {
    left: 19px;
    transform: rotate(-135deg);
}


.swiper-pagination{
   z-index: 1 !important;
}
.swiper-pagination-bullet {
    background-color: #ff4a3d !important;
    width: 16px !important;
    height: 16px !important;
}
.color_black .swiper-pagination-bullet,
.color_blue .swiper-pagination-bullet {
    background-color: #ff4a3d !important;
    border: 1px solid #ff4a3d;
}


#top_photo_wrap {
	overflow: hidden;
}
#top_photo {
	width: 1080px;
	margin: 0px auto;
}
#top_photo_list .photo img {
	width: 100%;
	height: auto;
	vertical-align: top;
}
#top_photo_list .photo a {
	display: block;
	color: inherit;
	text-decoration: none;
}
#top_photo_list .photo span.photo_caption {
	display: block;
	background: #333333;
	color: #ffffff;
	padding: 5px 20px;
}
#top_photo_list .photo span.photo_caption:empty {
	padding: 0px;
}
#top_photo_list .photo span.photo_caption span {
	color: inherit !important;
}

/* スライドショー（3枚表示） */
#top_photo.triple #top_photo_list {
	width: calc(1080px * 3);
	position: relative;
	left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
}

/* スライドコントロールボタン */
*[id*="_control_box"] {
	margin: 10px 0px 0px;
	padding: 10px 0px;
}
*[id*="_control_box"] button[id*="_control_"] {
	display: inline-block;
	vertical-align: middle;
	margin: 0px 5px 0px 0px;
	padding: 0px;
	width: 30px;
	height: 30px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border-radius: 100%;
	border: 1px solid #ffffff;
	color: #ffffff;
	background-color: #333333;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 8px auto;
	text-align: left;
	text-indent: -9999em;
	overflow: hidden;
}
*[id*="_control_box"] button[id*="_control_prev"] {
	background-image: url("/img/top/photo/btn_slide_prev.png");
}
*[id*="_control_box"] button[id*="_control_next"] {
	background-image: url("/img/top/photo/btn_slide_next.png");
}
*[id*="_control_box"] button[id*="_control_pause"] {
	background-image: url("/img/top/photo/btn_slide_stop.png");
}
*[id*="_control_box"] button[id*="_control_play"] {
	display: none;
	background-image: url("/img/top/photo/btn_slide_play.png");
}

/* スライドナビゲーションボタン */
*[id*="_control_navigation"] {
	display: inline-block;
	vertical-align: middle;
	margin-right: 20px;
}

ul.slick-dots {
	display: inline-block;
	vertical-align: middle;
	margin: 0px;
	padding: 0px;
	list-style: none;
}
ul.slick-dots li {
	display: inline-block;
	vertical-align: middle;
	margin: 0px 3px;
	padding: 2px;
}
ul.slick-dots li button {
	display: block;
	margin: 0px;
	padding: 0px;
	width: 20px;
	height: 20px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border-radius: 100%;
	text-indent: -9999em;
	text-align: left;
	overflow: hidden;
	border: 1px solid #ffffff;
	background: #cccccc;
	color: #333333;
}
ul.slick-dots li.slick-active button {
	background: #333333;
	color: #ffffff;
}

/* バナー広告 */
#footer_banner {
	clear: both;
	width: var(--content-width, 1080px);
	margin: 0px auto 60px;
}
#footer_banner ul.banner_list {
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap: 20px;
}
#footer_banner ul.banner_list li {
	width: 200px;
}
#footer_banner ul.banner_list li img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

.banner_text {
	display: block;
	padding: 10px;
	text-align: left;
}
.banner_text span {
	display: block;
}
.banner_text span:nth-child(2n) {
	font-size: var(--fontsize-main-small, 1.5rem);
}

/* 共通 */
.top_wrapper{
    overflow: hidden;
}
.inr{
    margin-inline: auto;
    padding: 0 20px;
    max-width: 1080px;
}
.top_subttl{
    margin: 0;
    text-align: center;
}
.top_subttl_en{
    text-align: center;
}
.top_subttl_en img{
    display: inline-block;
    padding-left: 12em;
}
.top_btn{
    display: block;
    background-color: #fff;
    border: 1px solid #ff4a3d;
    border-radius: 100px;
    color: #e22823 !important;
    font-size: 120%;
    margin-inline: auto;
    padding: 20px 50px 20px 40px;
    text-align: center;
    text-decoration: none !important;
    max-width: 372px;
    position: relative;
    transition: .3s;
}

.top_btn:hover{
    background-color: #e22823;
    color: #fff !important;
    transition: .3s;
}
.top_btn::before{
    content: '';
    width: 16px;
    height: 2px;
    background-color: #ff4a3d;
    position: absolute;
    right: 30px;
    top: 0;
    bottom: 0;
    margin: auto;
}
.top_btn::after {
    content: '';
    width: 10px;
    height: 10px;
    border-top: solid 2px #ff4a3d;
    border-right: solid 2px #ff4a3d;
    position: absolute;
    right: 30px;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: rotate(45deg);
}
.top_btn:hover::before{
    background-color: #fff;
}
.top_btn:hover::after{
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
}


/* リード */
.top_lead{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
.top_lead .lead_map img{
    width: 100%;
    max-width: 340px;
    height: auto;
}
.top_lead .lead_ttl{
    font-size: 180%;
    margin: 0 0 40px 0;
    text-align: center;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.top_lead .lead_txt{
    font-size: 95%;
    text-align: center;
    line-height: 2.4;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.top_lead .lead_txt span{
    display: block;
}
.top_lead .lead_img img{
    border-radius: 10px;
}
.top_lead .lead_img1 img{
    display: block;
    margin: 50px 0 30px auto;
    width: 100%;
    max-width: 240px;
    height: auto;
}
.top_lead .lead_img2 img{
    display: block;
    margin-left: auto;
    margin-right: -50px;
    width: 80%;
    max-width: 152px;
    height: auto;
    filter: drop-shadow(30px 30px 0px #efe4b6);
}

/* 鷹栖町の特徴 */
.top_point{
     background-color: #fcf8e8;
     margin-top: 80px;
     padding: 80px 0;
     position: relative;
}
.top_point .inr{
     padding-inline: 10px;
     position: relative;
}
.top_point .btn_wrap{
     padding-inline: 10px;
}
.top_point .inr::before{
    content: '';
    width: 170px;
    aspect-ratio: 170 / 156;
    background-image: url("/img/iju/point_img1.png");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: -120px;
    right: 120px;
}
.top_point .top_point_img{
    position: absolute;
    bottom: 0;
    left: 20px;
    width: 60%;
    max-width: 242px;
}
.top_point .top_point_img img{
    width: 100%;
    height: auto;
}
.top_point_list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    font-feature-settings: "palt";
    list-style-type: none;
    margin: 60px 0 100px;
    padding-left: 0;
    text-align: center;
}
.top_point_list li{
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 2.0;
}
.top_point_list li > div{
    box-sizing: border-box;
    background-color: #fff;
    padding: 60px 40px;
    position: relative;
    margin-inline: auto;
    width: 100%;
}

.top_point_list li > div::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 80px 20px 0 20px;
    border-color: #fff transparent transparent transparent;
}
.color_change.color_black .top_point_list li > div::after,
.color_change.color_blue .top_point_list li > div::after{
    display: none;
}

.top_point_list .point1 > div{
    border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%;
    margin-top: -80px;
}
.top_point_list .point1 > div::after {
    bottom: -40px;
    left: 40%;
}

.top_point_list .point2 > div{
    border-radius: 50% 50% 60% 40% / 55% 45% 55% 45%;
}
.top_point_list .point2 > div::after {
    bottom: -35px;
    left: 10%;
    transform: rotate(45deg);
}

.top_point_list .point3 > div {
    border-radius: 55% 45% 50% 50% / 45% 55% 45% 55%;
    margin-top: -80px;
}
.top_point_list .point3 > div::after {
    bottom: -24px;
    left: 16%;
    transform: rotate(62deg);
}

.top_point_list .point4 > div {
    border-radius: 45% 55% 60% 40% / 60% 45% 55% 40%;
    margin-top: -80px;
}
.top_point_list .point4 > div::after {
    bottom: -40px;
    left: 36%;
    transform: rotate(30deg);
}

.top_point_list .point5 > div {
    border-radius: 60% 40% 45% 55% / 50% 60% 40% 50%;
}
.top_point_list .point5 > div::after {
    bottom: -10px;
    left: 10%;
    transform: rotate(66deg);
}

.top_point_list .point6 > div {
    border-radius: 50% 60% 40% 50% / 45% 55% 50% 50%;
    margin-top: -80px;
}
.top_point_list .point6 > div::after {
    bottom: -27px;
    left: 10%;
    transform: rotate(50deg);
}

.top_point_list .larger{
    color: #e32417;
    font-weight: bold;
    font-size: 200%;
    line-height: 1.4;
}
.top_point_list .kome{
    font-size: 90%;
}


/* 移住者インタビュー */
.top_interview{
    padding: 80px 0;
}
.top_interview_slider{
    margin: 40px 0 40px;
    position: relative;
}
.top_interview_slider .free_box img{
    border-radius: 20px;
    width: 100% !important;    
    height: auto !important;    
}
.top_interview_slider .free_box p{
    margin: 0; 
}
.top_interview_slider button.swiper-button-start,
.top_interview_slider button.swiper-button-stop{
    position: relative;
    transform: none !important;
}
.top_interview_slider .slide_control_box1{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}
.top_interview_slider .slide_pagination{
    width: auto !important;
}



/* 新着情報 */
.top_info_clmn2{
        display: grid;
        grid-template-columns: 3fr 2fr;
        gap: 20px;
        filter: drop-shadow(0 0 3px rgba(0, 0, 0, .1));
}
.section_information {
	background-color: #fff;
	background-image: url("/img/iju/info_bg.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
        background-position: right 0 bottom -2px;
        border-radius: 20px;
	padding: 30px 30px 60px;
}
.section_information h2 {
	margin: 0px;
	padding: 0px;
	border: none;
	border-radius: 0;
	background: none;
	font-size: 2.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
}
.section_information h2::before {
        content: '';
        background-image: url("/img/iju/info_ttl_icon.png");
        background-repeat: no-repeat;
        background-size: contain;
        width: 48px;
        aspect-ratio: 96 / 76;
        display: block;
}
.section_information h2 .inline-block{
        display: inline-block;
}

.section_information p.no_data {
	margin: 0px;
	padding: 20px 0px;
}

.section_information_list ul {
	margin: 0px;
	padding: 30px 0px 0;
	list-style: none;
}
.section_information_list ul li {
	width: 100%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	margin: 0px 0px 15px;
}
.section_information_list ul li + li {
	border-top: 1px dotted #bcbcbc;
        padding-top: 20px;
}
.section_information_list ul li > span {
	vertical-align: top;
}
.section_information_list ul li > span.article_date {
	width: calc(11em + 10px);
	font-size: var(--fontsize-detail-small, 1.6rem);
	padding-top: 0.1rem;
        display: block;
}

.section_information_list img.icon_new {
	vertical-align: baseline;
	margin-left: 2.0em;
}


.section_information_list ul li a{
    color: #333;
    display: block;
    padding-right: 34px;
    position: relative;
    text-decoration: none;
}
.section_information_list ul li a:hover{
    text-decoration: underline;
}
.section_information_list ul li a::before{
    content: '';
    width: 12px;
    height: 2px;
    background-color: #ff4a3d;
    position: absolute;
    right: 12px;
    top: 0;
    bottom: 0;
    margin: auto;
}
.section_information_list ul li a::after {
    content: '';
    width: 6px;
    height: 6px;
    border-top: solid 2px #ff4a3d;
    border-right: solid 2px #ff4a3d;
    position: absolute;
    right: 12px;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: rotate(45deg);
}

/* 新着情報（文字拡大時） */
.font_size_changed .section_information_list ul li,
.font_size_changed .section_information_list ul li > span {
	display: block;
}
.font_size_changed .section_information_list ul li > span.article_date {
	width: auto;
	padding-top: 0px;
}

/* 新着情報（一覧 / RSS） */
.section_information_list div.link_box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap: 20px;
}
.section_information_list div.link_box span {
	display: inline-block;
	vertical-align: top;
	width: 260px;
	max-width: 100%;
}
.section_information_list div.link_box span a {
	display: block;
	border: 1px solid transparent;
	border-radius: 0;
	background: #ffffff;
	color: #333333;
	font-size: var(--fontsize-main-small, 1.5rem);
	line-height: 1.8rem;
	text-decoration: none;
	margin: 0px;
	padding: 10px 20px;
	text-align: center;
}
.section_information_list div.link_box span a:hover,
.section_information_list div.link_box span a:focus {
	text-decoration: underline;
}


/* SNS */
.top_sns{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.top_sns .sns_contents{
    flex-grow: 1;
}
.top_sns a{
    background-color: #fff;
    border-radius: 20px;
    box-sizing: border-box;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    padding: 20px;
    text-align: center;
    text-decoration: none;
}
.top_sns a:hover{
    text-decoration: underline;
}

/* category */
.top_category {
    background-image: url("/img/iju/category_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    margin-top: 80px;
    padding: 80px 0;
}
.top_category .top_category_list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}
.top_category .top_category_list a{
    background-color: #fff;
    border-radius: 20px;
    color: #333;
    display: block;
    margin-top: 35px;
    padding: 0 20px 20px;
    text-decoration: none;
    transition: .3s;
}
.top_category .top_category_list a:hover{
    background-color: #FCF8E8;
    transition: .3s;
}
.top_category .top_category_list a:hover img{
    opacity: 1;
}
.top_category .top_category_list figure{
    margin: -35px auto 10px;
    display: block;
    width: 70px;
    height: 70px;
}
.top_category .top_category_list h3{
    font-size: 160%;
    margin: 10px 0 10px;
    text-align: center;
}
.top_category .top_category_list2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 50px;
}
.top_category .top_category_list2 a{
    background-color: #fff;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 150px;
    text-decoration: none;
    transition: .3s;
}
.top_category .top_category_list2 a:hover{
    text-decoration: underline;
    background-color: #fcf8e8;
    transition: .3s;
}
.top_category .top_category_list2 a::before{
    content: '';
    width: 40%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}
.top_category .category_list2_1::before{
    background-image: url("/img/iju/category_img1.jpg");
}
.top_category .category_list2_2::before{
    background-image: url("/img/iju/category_img2.jpg");
}
.top_category .category_list2_txt{
    display: block;
    font-size: 120%;
    flex-grow: 1;
    padding-right: 30px;
    margin: 40px 0;
    position: relative;
}
.top_category .category_list2_txt::before{
    content: '';
    width: 16px;
    height: 2px;
    background-color: #ff4a3d;
    position: absolute;
    right: 16px;
    top: 0;
    bottom: 0;
    margin: auto;
}
.top_category .category_list2_txt::after {
    content: '';
    width: 10px;
    height: 10px;
    border-top: solid 2px #ff4a3d;
    border-right: solid 2px #ff4a3d;
    position: absolute;
    right: 16px;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: rotate(45deg);
}


/* もっと知りたい鷹栖町 */
.top_discover{
    background-color: #fcf8e8;
    padding: 80px 0;
}
.top_discover .discover_box{
    background-color: #fff;
    border-radius: 20px;
    padding: 40px;
    margin: 40px 0 0;
}
.top_discover .discover_box h3{
    border-left: 14px solid #ff4a3d;
    font-size: 140%;
    margin: 0 0 10px;
    padding-left: 10px;
}
.top_discover .discover_movie{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 20px 0 40px;
}
.top_discover .discover_movie img{
    width: 100%;
    height: auto;
}
.top_discover .discover_movie a{
    color: #333;
    display: block;
    text-decoration: underline;
    position: relative;
}
.top_discover .discover_movie a:after{
    content: '';
    display: block;
    position: absolute;
    top: -40px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background-image: url("/img/top/ico_video.png");
    background-size: contain;
    width: 60px;
    height: 60px;
}
.top_discover .discover_movie a:hover{
    text-decoration: none;
}
.top_discover .discover_guidebook .detail_free{
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
}
.top_discover .discover_guidebook .detail_free> div{
    max-width: calc( 100% - 320px);
}
.top_discover .discover_guidebook .detail_free img{
    display: block;
    margin-inline: auto;
    width: 100% !important;
    height: auto !important;
    max-width: 300px;
}
.top_discover .discover_guidebook #content_footer,
.top_discover .discover_guidebook #section_footer{
    display: none;
}

/* ========== 背景色変更 ========== */

/* 共通 */
.color_change * {

}
/* 黒 */
.color_black * {

}
/* 青 */
.color_blue * {

}

/* ==================================================
PC ここまで
================================================== */


/* ==================================================
スマートフォン
================================================== */
@media screen and (max-width: 1080px) {

	/* ========== トップページ ========== */

	/* スライドショー */
	button.slide-button-next {
 	   right: -5px;
	}
	button.slide-button-prev {
 	   left: -5px;
	}
	#top_photo {
		width: auto;
		margin: 15px 15px 0px;
	}

	/* スライドショー（3枚表示） */
	#top_photo.triple #top_photo_list {
		width: auto;
		left: auto;
		-webkit-transform: none;
		    -ms-transform: none;
		        transform: none;
	}

	/* スライドコントロールボタン */
	*[id*="_control_box"] {
		text-align: center;
	}

	/* スライドナビゲーションボタン */
	*[id*="_control_navigation"] {
		margin: 5px 20px;
	}

	/* バナー広告 */
	#footer_banner {
		width: auto;
		margin: 0px var(--mymainback-margin-side, 15px) 40px;
	}
	#footer_banner ul.banner_list {
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		gap: 10px;
	}
	#footer_banner ul.banner_list li {
		width: calc(50% - 5px);
		max-width: 200px;
	}

	.banner_text span:nth-child(2n) {
		font-size: var(--fontsize-main-small, 1.3rem);
	}

	/* リード */
	.top_lead{
 	   grid-template-columns: 1fr;
	}
        .top_lead .lead_map img{
           display: block;
           margin-inline: auto;
        }
        .top_lead .lead_img{
           margin-left: auto;
           margin-right: auto;
           width: 100%;
           max-width: 400px;
        }
        .top_lead .lead_img1 img{
           margin: 30px 0 20px 0;
        }
        .top_lead .lead_img2 img{
           margin-right: 30px;
        }

        /* 鷹栖町の特徴 */
        .top_point .inr::before{
            width: 120px;
            right: 30px;
        }
        .top_point .top_point_img{
            position: static;
        }
        .top_point_list{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            margin: 20px 0 30px;
        }
        .top_point_list li > div{
            margin-top: 0 !important;
            padding: 40px 10px;
        }
        .top_point .btn_wrap{
            margin-top: 20px;
        }


        /* 移住者インタビュー */
        .top_interview_slider{
            padding-inline: 40px;
        }

	/* 新着情報 */
        .section_information h2{
            display: block;
            text-align: center;
        }
        .section_information h2::before{
            margin: 0 auto 5px;
        }

	/* 新着情報（一覧 / RSS） */
	.section_information_list div.link_box {
		padding: 0px 20px 30px;
		gap: 10px;
	}
	.section_information_list div.link_box span {
		width: auto;
		max-width: none;
		min-width: calc(50% - 5px);
	}
	.section_information_list div.link_box span a {
		font-size: var(--fontsize-main-small, 1.3rem);
	}
        .top_discover .discover_guidebook .detail_free{
                display: block;
        }
        .top_discover .discover_guidebook .detail_free > div{
                margin-bottom: 30px;
                max-width: 100%;
        }

	/* ========== 背景色変更 ========== */

	/* 共通 */
	.color_change * {

	}
	/* 黒 */
	.color_black * {

	}
	/* 青 */
	.color_blue * {

	}

}


@media screen and (max-width: 660px){
        .side_fixed_btn a{
           display: none;
        }
        .top_main_slider .swiper-slide span {
            aspect-ratio: 4 / 3;
        }
        .top_point_list{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px 8px;
            font-size: 80%;
        }
        .top_point_list li > div::after {
            border-width: 40px 10px 0 10px;
        }
        .top_point_list .larger{
            font-size: 150%;
        }
        .top_point_list .point1 > div::after {
            bottom: -25px;
        }
        .top_point_list .point2 > div::after {
            bottom: -25px;
        }
        .top_point_list .point3 > div::after {
            bottom: -14px;
        }
        .top_point_list .point4 > div::after {
           bottom: -20px;
        }
        .top_point_list .point5 > div::after {
            bottom: -10px;
        }
        .top_point_list .point6 > div::after {
            bottom: -17px;
        }
        .top_info_clmn2{
            grid-template-columns: 1fr;
        }
        .top_category .top_category_list{
            grid-template-columns: repeat(1, 1fr);
            gap: 20px;
        }
        .top_category .top_category_list2{
            grid-template-columns: repeat(1, 1fr);
        }
        .top_discover .discover_movie{
            grid-template-columns: repeat(1, 1fr);
        }
        .top_discover .discover_box{
            padding: 40px 20px;
        }

/* ==================================================
スマートフォン ここまで
================================================== */