@charset "UTF-8";
/* CSS Document */
@media screen and (max-width:770px) {
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;/*基本を16pxで設定*/
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.8;
    vertical-align: baseline;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    }
    body{
        margin: 0;
        padding: 0;
    }
    a{
        text-decoration: none;
    }
    .wrapper{
    }
    .wrapper.show{
        opacity: 1;
    }
    #contant{
        margin: auto;
    }
    .box{
        width: 100%;
        margin: auto;
    }
    .box1{
        width: 100%;/*1368px*/
        max-width: 1300px;
        margin: auto;
    }
    .box2{
        width: 100%;/*1380px*/
        max-width: 1200px;
        margin: auto;
    }
    .hidden{
        overflow: hidden;
    }
    /*---------------------------------------------------------------------------------------------------------------*/
    /* ----フォント関連 ----*/
    .com_title1{
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 21px;/* 30px */
        line-height: 1.5;
    }
    .com_title2{
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 19px;/* 26px */
        line-height: 1.5;
    }
    .com_title3{
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 24px;/* 34px */
        line-height: 1.5;
    }
    .com_title4{
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: clamp(1.375rem, 1.009rem + 0.74vw, 1.75rem);/* 28px */
        line-height: 1.5;
    }
    .en_title1{
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
        font-size: clamp(1.75rem, 1.384rem + 0.74vw, 2.125rem);/* 34px */
        font-weight: 700;
        font-style: normal;
        line-height: 2;
    }
    .en_title2{
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
        font-size: clamp(1.375rem, 1.009rem + 0.74vw, 1.75rem);/* 28px */
        font-weight: 700;/* 700 */
        font-style: normal;
        line-height: 2;
    }
    .en_title3{
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
        font-size: clamp(1.938rem, 1.82rem + 0.24vw, 2.125rem);/* 34px */
        font-weight: 700;/* 700 */
        font-style: normal;
        line-height: 2;
    }
    .box_title1::before{
        content: '';
        display: block;
        width: 60px;/* 60px*/
        height: 65px;/* 60px*/
        margin: 0 auto 10px;
        padding: 20px 0;/* 20px 0*/
        background: url("img/common/title-tag2.png");
        background-size: cover;
    }
    .box_title2::before{
        content: '';
        display: block;
        width: 60px;/* 60px*/
        height: 65px;/* 60px*/
        margin: 0 auto 10px;
        padding: 1.39vw 0;/* 20px 0*/
        background-image: url("img/common/title-tag.png");
        background-size: cover;
    }
    .box_title3::before{
        content: '';
        display: block;
        width: 60px;/* 60px*/
        height: 60px;/* 60px*/
        margin: auto;
        padding: 1.39vw 0;/* 20px 0*/
        background-image: url("img/common/box_title3.png");
        background-size: cover;
    }
    .line-title1::after{
        content: '';
        display: block;
        width: 60px;/* 60px*/
        margin: auto;
        border-bottom: 4px solid #D20003;
    }
    .af-line::after{
        display: block;
        content: '';
        width: 90px;/* 90px */
        border-top: 10px solid #0065BD;
        margin: auto;
        border-radius: 10px;
    }
    .line-title2{
        display: inline-block;
        border-bottom: 3px solid #6c2735;
        margin-top: 4px;
    }
    /*--------------- 縦書き----------------------*/
    .font1{
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 15px;/* 20px */
        line-height: 1.7;
    }
    .font2{
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;/* 14px */
        line-height: 1.8;
    }
    .font3{
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 17px;/* 14px */
        line-height: 1.6;
    }
	/*----改行  --*/
	.pc-br{
		display: none;
	}
	.sp-br{
		display: block;}
	/*----------------------------*/
    .green{
        color: rgb(2,104,55);
    }
    .pink{
        color: #c70067;
    }
    .blue{
        color: #0068b7;
    }
    .brown{
        color: #614623;
    }
    .white{
        color: #FFFFFF;
    }
    /*-------------------------------*/
    .m-top10{
        margin-top: 1.15%;/* 15px */
    }
    .m-top30{
        margin-top: 2.69%;/* 35px */
    }
    .m-top50{
        margin-top: 55px;/* 55px */
    }
    /*--------------------------*/
    .f-center{
        text-align: center;
    }
    .center{
        text-align: center;
    }
    .s-center{
        text-align: center;
    }
    /*-----------------------------------------------------------*/
    .gnav-btn2{
        display: none;
    }
    .g-nav2{
        display: none;
    }
    .phone-mark{
        display: none;
    }
    .mail-mark{
        display: none;
    }
    /*========================  　背景画像　　======================================================================*/
    .bg-img1{
	background-image: url("img/common/bg-img1.jpg");
	background-size: cover;
	background-position: center middle;
    }
    .bg-img2{
        background-image: url("img/common/bg-img2.jpg");
        background-size: cover;
        background-position:center;
    }
    .bg-img3{
        background-image: url("img/common/bg-img3.jpg");
        background-size: cover;
        background-position:center;
    }
    .bg-img4{
        background-image: url("img/common/bg-img4.jpg");
        background-size: cover;
        background-position:center;
    }
    .bg-img5{
        background-image: url("img/common/bg-img5.jpg");
        background-size: cover;
        background-position: center;
        vertical-align: middle;
    }
    .bg-img6{
        background-image: url("img/common/bg-img6.jpg");
        background-size: cover;
    }
    .bg-img7{
        background-image: url("img/common/bg-img7.jpg");
        background-size: cover;
    }
    /*---------------------  背景カラー　--------------------------------*/
    .bg-black{
        background: #000000;
    }
    .bg-white{
        background:#FFFFFF;
    }
    .bg-gray{
        background:rgba(245,245,245,0.8);
    }
    /* 改行コード-----------------*/
    .pc-br{
        display: none;
    }
    .sp-br{
        display: block;
    }
    /*---------------------  リンク関係　--------------------------------*/
    a .page-link1{
        text-decoration: none;
        color: #FFFFFF;
    }
    .page-link1{
        position: relative;
        width: 50%;
        padding: 8px 10px;
        text-align: center;
        border: 1px solid #FFFFFF;
        margin: 30px auto 0;
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 400;
        font-style: normal;
        line-height: 1;
        font-size: 16px;/* 20px */
    }
    .page-link1::before{
        position: absolute;
        content: "";
        width: 0%;
        height: 100%;
        background: #0095E0;
        transition: width 0.5s ease;
        z-index: -1;
        top: 0;
        left: 0;
    }
    .page-link1:hover::before{
        width: 100%;
    }
    .page-link1:hover{
        color: #FFFFFF;
        trasiton: 0.5s;
    }
    /*-------------------------*/
    a .page-link2{
        text-decoration: none;
        color: #0095E0;
    }
    .page-link2{
        position: relative;
        width: 50%;
        padding: 8px 10px;
        text-align: center;
        border: 1px solid #0095E0;;
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 400;
        font-style: normal;
        line-height: 1;
        font-size: 16px;/* 20px */
        color: #0095E0;
        float: right;
        margin-top: 30px;
        border-radius: 10px;
        overflow: hidden;
    }
    .page-link2::before{
        position: absolute;
        content: "";
        width: 0%;
        height: 100%;
        background: #0095E0;
        transition: width 0.5s ease;
        z-index: -1;
        top: 0;
        left: 0;
    }
    .page-link2:hover::before{
        width: 100%;
    }
    .page-link2:hover{
        color: #FFFFFF;
        trasiton: 0.5s;
    }
    /*---スマホメニュー　----*/
    #sp-header{
		position: fixed;
        display: block;
		width: 100%;
		height: 50px;
		z-index: 1000;
		top: 0;
		left: 0;
		right: 0;
		background: #0832bc;
    }
	#sp-hd-logo{
		position: absolute;
		display: block;
		width: 45%;/* 250px */
		height: auto;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 10px;
	}
	/* ▼メニュー（ハンバーガーアイコン）▼*/
	/*nabi開閉部分*/
	/*ハンバーガーボタン*/ 
	.gnav-btn{
		display: block;
		position: absolute;
		top: 0;/*24px*/
		bottom: 0;
		right: 10px;/*20px*/
		margin: auto;
		z-index: 3000;
		width: 11.5vw;/* 45px */
		height: 11.2vw;/* 45px */
	}
	   /*ハンバーガーボタン*/ 
		.icon-animation {
		width: 10vw;/*40px*/
		height: 10vw;/*40px*/
		display: block;
		cursor: pointer;
		float: right;
		position: absolute;
		margin: auto;
		right: 0;
		left: 0;
		top:0;
		text-align: center;
		color: #FFFFFF;
		}
		.icon-animation span {
		  width: 8vw;/*30px*/
		  height: 0.3vw;/*2px*/
		  display: block;
		  background: #FFFFFF;
		  position: absolute;
		  left: 50%;
		  top: 50%;
		  margin-left: -4vw;
		  -webkit-transition: all 0.3s;
		  transition: all 0.3s;
		  -webkit-transform: rotate(0deg);
		  -ms-transform: rotate(0deg);
		  transform: rotate(0deg);
		}
		.icon-animation .top {
		  -webkit-transform: translateY(-13px);
		  -ms-transform: translateY(-13px);
		  transform: translateY(-13px);
		}
		.icon-animation .bottom {
		  -webkit-transform: translateY(13px);
		  -ms-transform: translateY(13px);
		  transform: translateY(13px);
		}
		.is-open .middle {
		  background: rgba(51, 51, 51, 0);
		}
		.is-open .top {
		  -webkit-transform: rotate(-45deg) translateY(0px);
		  -ms-transform: rotate(-45deg) translateY(0px);
		  transform: rotate(-45deg) translateY(0px);
		}
		.is-open .bottom {
		  -webkit-transform: rotate(45deg) translateY(0px);
		  -ms-transform: rotate(45deg) translateY(0px);
		  transform: rotate(45deg) translateY(0px);
		}
		/* .global_nav */
	.global_nav {
		position: fixed;
		display: block;
		overflow: scroll;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		transform: translateX(100%);/* 360%*/
		padding-top: 0;
		text-align: center;
		background:rgba(0,0,0,0.9);
		transition: all 0.7s;
		z-index: 900;
	}
	/* .global_navに.activeが追加 */
	.global_nav.active {
		transform: translateX(0%);/* 240%*/
	}
	#global-menu{
		display: table;
		position: absolute;
		width: 90%;
		height: auto;
		list-style: none;
		top: 12%;/* 150px */
		left: 0;
		right: 0;
		margin: auto;
		overflow: hidden;
		font-size:0;
		line-height:0;
		border: 1px solid #FFFFFF;
	}
	#global-menu a{
		display: block;
		color: #FFFFFF;
		text-decoration: none;
	}
	#global-menu li{
		font-family: "Zen Kaku Gothic New", sans-serif;
		font-weight: 500;
		font-style: normal;
		font-size: 15px;/* 18px */
		color: #FFFFFF;
		padding: 10px 6px ;/* 10px */
		transition: 1s;
		line-height: 1em;
	}
	.nav0{
		display: block;
		width: 100%;
		border-bottom: 1px solid #FFFFFF;
		text-align: center;
	}
	.nav1{
		display: inline-block;
		width: 49.13%;
		border-bottom: 1px solid #FFFFFF;
		border-right: 1px solid #FFFFFF;
		text-align: center;
	}
	.nav2{
		display: inline-block;
		width: 49.13%;
		border-bottom: 1px solid #FFFFFF;
		text-align: center;
	}
	.nav4{
		display: block;
		width: 100%;
		border-bottom: 1px solid #FFFFFF;
		text-align: center;
		color: #FFFFFF;
		background: #296ED2;
	}
	#oem-menu{
		display: table;
		position: absolute;
		width: 90%;
		height: auto;
		list-style: none;
		top: 60%;/* 150px */
		left: 0;
		right: 0;
		margin: auto;
		overflow: hidden;
		font-size:0;
		line-height:0;
		border: 1px solid #FFFFFF;
	}
	#oem-menu a{
		display: block;
		color: #FFFFFF;
		text-decoration: none;
	}
	#oem-menu li{
		font-family: "Zen Kaku Gothic New", sans-serif;
		font-weight: 500;
		font-style: normal;
		font-size: 15px;/* 18px */
		color: #FFFFFF;
		padding: 10px 6px ;/* 10px */
		transition: 1s;
		line-height: 1em;
	}
    /*------------------------------------  コンテンツcss ------------------------------------------------------------*/
    header{
		padding-top: 50px;
    }
    header2{
    }
    #in-header{
        position: relative;
        width: 100%;
        height: 95vh;/* 1700px */
        background: url("img/home/m-img1.jpg");
        background-size: cover;
    }
    #in-header::after{
        display: none;
    }
    h1{
        display: none;
    }
    #pc-menu{
        display: none;
    }
    #pc-menu li{
        display: none;
    }
    #pc-menu li a{
        text-decoration: none;
        color: #FFFFFF;
    }
    .m-msg1{
        position: absolute;
        width: 90%;/* 1000px */
        height: auto;
        top: 35.8%;/* 440px */
        left: 6.3%;/* 100px */
    }
    .m-msg2{
        position: absolute;
        width: 90%;/* 1000px */
        top: 55.8%;/* 780px */
        left: 6.3%;/* 100px */
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 16px;/* 30px */
        line-height: 1.5;
        color: rgb(0,43,186);
    }
    .m-foam1{
        position: absolute;
        width: 22.5%;/* 360px */
        height: auto;/* 360px */
        top: 40%;/* 510px */
        right: 7.5%;/* 200px */
    }
    .m-foam2{
        position: absolute;
        width: 12.5%;/* 200px */
        height: auto;/* 200px */
        top: 57%;/* 800px */
        right: 25%;/* 560px */
    }
    /*-----------------------------------  フッター  ----------*/
    footer{
        position: relative;
        height: auto;/* 650px */
		padding: 30px 0;
        background-image: linear-gradient(30deg, rgba(8, 51, 189, 1) 59%, rgba(144, 185, 255, 1));
    }
    footer::after{
        display: none;
    }
    #in-footer1{
        position: inherit;
        width: 95%;/* 1000px */
        height: auto;/* 430px */
		padding: 12px 0;
        background: #FFFFFF;
        top: inherit;
        bottom: inherit;
        left: inherit;/* 100px */
        margin: auto;
        border-radius: inherit;
        box-shadow: inherit;
    }
    #ft-logo{
        display: block;
        width: 95%;/* 800px */
        height: auto;/* 200px */
        margin: 3.12% auto;/* 100px auto 50px */
    }
    #ft-adress{
        width: 100%;
        text-align: center;
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 12px;/* 30px */
        line-height: 1.5;
    }
    #in-footer2{
        position: inherit;
        display: flex;
        flex-direction: row;
        width: 95%;/* 350px */
        height: auto;/* 430px */
        top: inherit;
        bottom: inherit;
        right: inherit;/* 80px */
        margin: 7px auto;
        list-style: none;
        justify-content: space-between;
    }
    #in-footer2 li{
        width: 32%;/* 350px */
        height: auto;/* 130px */
        background: #FFFFFF;
        box-shadow: inherit;
    }
    #in-footer2 li img{
        width: 100%;
        height: auto;
    }
    #copy{
        position: absolute;
        width: 100%;
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: clamp(0.563rem, 0.38rem + 0.37vw, 0.75rem);/* 12px */
        line-height: 1;
        color: #FFFFFF;
        text-align: center;
        bottom: 5px;
    }
    /*---------------------------------------------------  下層ページヘッダー　-------------------*/
    #in-header2{
        position: relative;
        width: 100%;/* 1570px*/
        height: auto;/* 540px*/
        margin: auto;
    }
    #in-header2::after{
        content: '';
        display: block;
        padding-top: 33.75%;
    }
    #h1-page{
        position: absolute;
        z-index: -10;
    }
    #hd-logo{
        display: none;
    }
    #pc-menu2{
        display: none;
    }
    #pc-menu2 li{
        display: none;
    }
    #pc-menu2 li a{
        display: none;
    }
    .page-title{
        position: absolute;
        width: 50.5%;/* 600px */
        height: auto;/* 190px */
        background: #FFFFFF;
        left: 0;
        bottom: 0;
        border-radius: 0 10px 0 0;
    }
    .page-title::after{
        content: '';
        display: block;
        padding-top: 35.2%;
    }
    #title1{
        position: absolute;
        top: 10px;
        left: 10px;
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 17px;/* 30px */
        line-height: 1;
        color: #0067D3;
    }
    #title2{
        position: absolute;
        top: 40px;
        left: 10px;
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 20px;/* 47px */
        line-height: 1;
        color: #0067D3;
    }
    /*---　永遠に横にスライダー ---*/
    .marquee {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        white-space: nowrap;
        overflow: hidden;
    }
    .item1{
    }
    .item2{
        position: absolute;
        display: inline-block;
        padding: 20px 40px;
        font-family: "Noto Sans JP", sans-serif;
        font-optical-sizing: auto;
        font-weight: 700;
        font-style: normal;
        color: rgba(160,216,239,0.2);
        line-height: 1;
        font-size: 240px;/* 240px */
        margin-right: 20px;/* 20px */
        z-index: -1;
        bottom: 10px;/* 10px */
    }
    .item3{
        position: absolute;
        display: inline-block;
        padding: 20px 40px;
        font-family: "Noto Sans JP", sans-serif;
        font-optical-sizing: auto;
        font-weight: 700;
        font-style: normal;
        color: #FFFFFF;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #dcdcdc;
        line-height: 1;
        font-size: 240px;
        margin-right: 20px;
        z-index: -1;
        bottom: 10px;
    }
    /*-------------- 背景画像がスクロール　---------*/
    .bg-scroll{
        position: relative;
        background-image: url("img/common/bg-img0.jpeg"); /* ← 画像を差し替えてください */
        background-repeat: repeat-x;
        background-size: cover;
        background-position: 0 0;
    }
    .bg-scroll2{
        position: relative;
        background-image: url("img/common/bg-img0.jpeg"); /* ← 画像を差し替えてください */
        background-repeat: repeat;
        background-size: cover;
        background-position: 0 0;
    }
    /*-------------------- スクロールで波うちながら表示-----------------------*/
    .wave-box{
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .wave {
        position: absolute;
        width: 95%;
        color: #FFFFFF;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #dcdcdc;
        overflow: hidden;
        display: inline-block;
        opacity: 0;
        left: 0;
        right: 0;
        bottom: 10px;
        margin: auto;
    }
    .wave span {
        display: inline-block;
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.6s ease;
        font-family: "Noto Sans JP", sans-serif;
        font-optical-sizing: auto;
        font-weight: 700;
        font-style: normal;
        font-size: 140px;
        line-height: 1;
    }
    /* 表示時に追加されるクラス */
    .wave.visible {
        opacity: 1;
    }

    .wave.visible span {
        opacity: 1;
        transform: translateY(0);
    }
    /*-----------------------*/
    .wave-text2 {
        overflow: hidden;
    }
    .wave-text2 span {
        display: inline-block;
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.6s ease;
        font-family: "Noto Sans JP", sans-serif;
        font-optical-sizing: auto;
        font-weight: 700;
        font-style: normal;
    }
    /* 表示時に追加されるクラス */
    .wave-text2.visible {
        opacity: 1;
    }

    .wave-text2.visible span {
        opacity: 1;
        transform: translateY(0);
    }
    /*-----------------------------------*/
    /*----------- ドット柄 ----------*/
    .dot-back{
        background-image: radial-gradient(#f0f8ff 1px, transparent 1px);
        background-size: 20px 20px;
    }
    /*----------- 罫線柄 ----------*/
    .grid-back{
        background-image:
        linear-gradient(to right, #f5f5f5 1px, transparent 1px),
        linear-gradient(to bottom, #f5f5f5 1px, transparent 1px);
        background-size: 20px 20px;
    }
    /*----------------------------*/
    .change{
        font-family: "Noto Sans JP", sans-serif;
        font-optical-sizing: auto;
        font-weight: 700;
        font-style: normal;
        trasition: 2s;
    }
    .change.sc-color{
        display: inline-block;
        background-image: linear-gradient(127deg, rgba(0, 75, 195, 1) 39%, rgba(14, 244, 255, 1));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}