@charset "UTF-8";
/* CSS Document */

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
共通部分
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

h1{
    font-size: 2.67em;
    font-weight: 600;
}
h2 {
    font-size: 2.12em;
    font-weight: 500;
}
section.wrap_m.titleiner {
    margin-top: 3.75em;
}
br.sp_on{
    display: none;
}
@media screen and (max-width: 768px) {
    h2 {
        font-size: 28px;
    }
	section.wrap_m {
		padding-bottom: 0 ;
	}
    br.sp_on{
        display: block;
    }
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
flex-box 画像一段目　
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.flex-box{
    display: flex;
    justify-content: center;
    gap: 45px;
    margin-bottom: 95px;
}
.flex-item{
    position: relative;
    width: 48%;
}
.flex-item img.main_img{
    width: 100%;
}
.flex-item img.right_img{
    position: absolute;
    max-width: 21%;
    top: -16%;
    right: -5%;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
gif_img　gif　レイアウト(airplane)
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.gif_img.airplane{
    position: relative;
    max-width: 450px;
    margin: 0 0 3% 5%;
}
.gif_img.airplane img{
/*    position: absolute;*/
    width: 100%;
    height: auto;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
gif_img　gif　レイアウト(train)
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.gif_img.train{
    position: absolute;
    max-width: 230px;
    top: -26%;
    left: 30%;
}
.gif_img.train img{
    width: 100%;
    height: auto;
    transform: rotate(-8deg);
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
grid_box 画像2段目以降
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.grid_box{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 95px 45px;
    margin-bottom: 4.7em;
}
.grid_item{
    position: relative;
    width: 100%;
}
.grid_item img.main_img{
    width: 100%;
}
.grid_item img.right_img{
    position: absolute;
    max-width: 21%;
    top: -16%;
    right: -5%;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
only_footerdsain フッターデザイン
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.footer-nav {
    width: 100%;
    margin-top: 30px;
}
.only_footerdsain {
    position: relative;
    width: 100%;
    /* 画像の本来の高さ */
    height: 350px; 
    
    /* 背景画像の設定 */
    background-image: url('images/footer_img.webp?20260630');
    background-repeat: no-repeat;
    background-position: center top; /* 画像の中央を基準に固定 */
    background-size: cover;
    
    /* はみ出し非表示 */
    overflow: hidden;
}
img.besse {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 中央をキープして両端をカット */
    object-position: center top;
}
img.ship {
    position: absolute;
    top: 30.3%;
    left: 50%;
    margin-left: -300px;
    width: auto;
    max-height: 160px;
}
img.kanran {
    position: absolute;
    top: 36.3%;
    left: 50%;
    margin-left: 240px;
    width: auto;
    max-height: 120px;
}

@media screen and (max-width: 768px) {
    .only_what {
        padding-top: 2em;
    }
    .account-wrap {
        margin: 0 auto 40px;
    }
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
flex-box 画像一段目　　スマホ対応
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
    .flex-box {
        gap: 45px;
        flex-direction: column;
        margin-bottom: 45px;
    }
    .flex-item {
        width: 100%;
    }
    .flex-item img.right_img {
        max-width: 18%;
        top: -12%;
        right: -2%;
    }
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
gif_img　gif　レイアウト(train) スマホ対応
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
    .grid_item.shaft {
        margin-bottom: 50px;
    }
    .gif_img.train {
        top: -85px;
        left: 14%;
    }
    .grid_item img.right_img {
        max-width: 18%;
        top: -12%;
        right: -2%;
    }
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
grid_box 画像2段目以降 スマホ対応
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
    .grid_box {
        grid-template-columns: repeat(1, 1fr);
        gap: 45px;
        margin-bottom: 0;
    }
    .gif_img.train img {
        transform: rotate(0);
    }
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
only_footerdsain フッターデザイン スマホ対応
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

    .only_footerdsain {
        height: 120px;
        background-position: center left 60%;
    }
    img.ship {
        top: 26.3%;
        left: 50%;
        margin-left: -150px;
        max-height: 60px;
    }
    img.kanran {
        top: 29.3%;
        left: 55%;
        margin-left: 26px;
        max-height: 50px;
    }
}
@media screen and (max-width: 600px) {
    img.kanran {
        margin-left: 19px;
    }
}
@media screen and (max-width: 400px) {
    img.kanran {
        margin-left: 9px;
    }
}