@charset "UTF-8";
@media(min-width:1000px) {
    .container {
        width: 100%;
    }

    body {
        min-width: 1000px;
        background-color: lightcyan;
        color: #00648c;
    }

.openbtn{
    display: none;
}
nav{
    display: none;
}
.header {
    
    padding-top: 3%;
    background-image: url(../img/header.png);
    background-repeat: no-repeat;
    background-color: lightcyan;
    height: 300px;
    margin-bottom: 5%;
}

.header_outer {
   
    display: flex;
    align-items: center;
}

.header1 {
    width: 15%;
    margin-left: 60%;
}

.header2 {
    text-align: center;

}

.header3 {
    width: 100%;
    margin: auto 0;

    padding-top: 5%;
}

.header3 {
    width: 100%;
}

.header3 ul {
    display: table;
    margin: 0 auto;
    padding: 0;

    width: 80%;
    text-align: center;
    background-color: #FFEE7D;
}

.header3 li {
    display: table-cell;
    min-width: 50px;
}

.header3 li a {
    display: block;
    width: 250px;
    padding: 10px 0;
    text-decoration: none;
    color: #555;
    font-weight: bold;
}

.header3 li:hover {
    background-color: #FFF2CC;
}
.service{
    width: 100%;
    margin: 0 auto;
}

.service1 img{
    width: 60%;
    margin: 0 auto;
    margin-bottom: 50px;
}
.service2{
    margin-top: 3%;
    display: flex;
    justify-content: space-around;
    margin-bottom: 3%;
}
.service3 p{
    font-size: large;
    font-weight: bold;
}
.service4 p{
    font-size: large;
    font-weight: bold;
}
.service3 li p{
    font-size: smaller;
}
.service4 li p{
    font-size: smaller;
}

.tab-3 {
    display: flex;
    flex-wrap: wrap;
    max-width: 80%;
    margin: 0 auto;
    margin-bottom: 5%;
}

.tab-3 > label {
    flex: 1 1;
    order: -1;
    min-width: 70px;
    padding: .7em 1em .5em;
    background-color: #f2f2f2;
    color: #999;
    font-weight: 600;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
}

.tab-3 > label:hover {
    opacity: .8;
}

.tab-3 input {
    display: none;
}

.tab-3 > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    background-color: #fff;
}

.tab-3 label:has(:checked) {
    border-bottom: 4px solid #2589d0;
    color: #2589d0;
}

.tab-3 label:has(:checked) + div {
    display: block;
}


.taxi {
    width: 100%;
}

.taxi1 {
   color: #555;
    font-size: xx-large;
    text-align: center;
    padding: 2%;
    background-color: #FAE488;
    margin-bottom: 5%;
}
.taxi2 {
    width: 50%;
    padding: 20px;
    margin: 0 20px 20px 20px;
    background: #EDFFBE;
    color: #fff;
    box-sizing: border-box;
    margin: 0 auto;
}

.taxi2 p {
    color: #555;
    text-align: center;
    padding-top: 3%;
}

.taxi3 {
    width: 100%;
    margin-left: 12%;
    
}
.taxi3 p{
    color: #555;
    text-align: center;
    padding-top: 2%;
}
.question{
    width: 100%;
    margin-bottom: 5%;
}
.question1{
    width: 100%;
    font-size: xx-large;
    text-align: center;
    padding: 2%;
    background-color: #FAE488;
    margin-bottom: 5%;
}
.question2{
    width: 60%;
   
    margin: 0 auto;
}

.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa .cp_actab {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0 0 1em 0;
	color: #1b2538;
}
.cp_qa .cp_actab input {
	position: absolute;
	opacity: 0;
}
/* 質問 */
.cp_qa .cp_actab label {
	font-weight: bold;
	line-height: 1.6em;
	position: relative;
	display: block;
	margin: 0 0 0 0;
	padding: 1em 2em 1em 2.5em;
	cursor: pointer;
	text-indent: 1em;
	border-radius: 0.5em;
	background: rgba(27,37,56,0.1);
}
.cp_qa .cp_actab label::before {
	font-family: serif;
	font-size: 1.5em;
	margin-left: -2em;
	padding-right: 0.5em;
	content: 'Q';
}
.cp_qa .cp_actab label:hover {
	transition: all 0.3s;
	color: #00838f;
}
/* --質問の＋アイコン */
.cp_qa .cp_actab label::after {
	font-size: 1.7em;
	font-weight: bold;
	line-height: 2em;
	position: absolute;
	top: 0;
	right: 0;
	content: '＋';
	display: inline-block;
	width: 2em;
	height: 2em;
	-webkit-transition: transform 0.4s;
	        transition: transform 0.4s;
}
/* 答え */
.cp_qa .cp_actab .cp_actab-content {
	position: relative;
	overflow: hidden;
	max-height: 0;
	padding: 0 0 0 2.5em;
	-webkit-transition: max-height 0.2s;
	        transition: max-height 0.2s;
	border-radius: 0 0 0.5em 0.5em;
}
.cp_qa .cp_actab .cp_actab-content::before {
	font-family: serif;
	font-size: 1.5em;
	position: absolute;
	margin: 0.4em 0 0 -1em;
	padding: 0;
	content: 'A';
}
.cp_qa .cp_actab .cp_actab-content p {
	margin: 1em 1em 1em 0;
}
/* 質問を開いた時の仕様 */
/* --答えの高さ */
.cp_qa .cp_actab input:checked ~ .cp_actab-content {
	max-height: 40em;
	border: 10px solid rgba(27,37,56,0.1);
}
/* 質問をクリックした時のアイコンの動き */
.cp_qa .cp_actab input:checked ~ label {
	color: #00838f;
	border-radius: 0.5em 0.5em 0 0;
}
/* 質問をクリックした時の+の動き */
.cp_qa .cp_actab input[type=checkbox]:checked + label::after {
	-webkit-transform: rotateZ(45deg);
	transform: rotateZ(45deg);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}
.footer {
    width: 100%;
    padding-top: 3%;
    background-image: url(../img/footer.png);
   
    background-color: lightcyan;
    height: 350px;
}
.footer1 {
    width: 100%;
}

.footer1 ul {
    display: table;
    margin: 0 auto;
    padding: 0;

    width: 80%;
    text-align: center;
    background-color: #FFEE7D;
}

.footer1 li {
    display: table-cell;
    min-width: 50px;
}

.footer1 li a {
    display: block;
    width: 250px;
    padding: 10px 0;
    text-decoration: none;
    color: #555;
    font-weight: bold;
}

.footer1 li:hover {
    background-color: #FFF2CC;
}

.footer {
    text-align: center;
    margin-top: 15%;
}
}

.randomBox,
.randomScroll {
    display: flex;
    flex-wrap: wrap;
}


.box {
    width: 220px;
    padding: 20px;
    margin: 0 20px 20px 20px;
    background: #EDFFBE;
    color: #fff;
    box-sizing: border-box;
    list-style: none;
}

/*==================================================
    スタート時は要素自体を透過0にするためのopacity:0;を指定する
    ===================================*/

.box {
    opacity: 0;
}

/*==================================================
    ふわっ
    ===================================*/

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* タブレットサイズ　レスポンシブ */
@media(min-width:600px) and (max-width:999px) {
    body {
        min-width: 600px;
        max-width: 999px;
        background-color: lightcyan;
        color: #00648c;
    }

    .container {
        width: 100%;
    }

    .openbtn {
        display: none;
    }

    nav {
        display: none;
    }

    .header {
        width: 100%;
        padding-top: 3%;
        background-image: url(../img/tb-header.png);
        background-repeat: no-repeat;
        background-color: lightcyan;
        margin-bottom: 8%;
    }

    .header_outer {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .header1 {
        width: 15%;
        margin-left: 55%;
    }

    .header2 {
        text-align: center;
    }

    .header2 h1 {
        font-size: x-large;
    }

    .header3 {
        width: 100%;
        margin: auto 0;

        padding-top: 5%;
    }

    .header3 {
        width: 100%;
    }

    .header3 ul {
        display: table;
        margin: 0 auto;
        padding: 0;

        width: 80%;
        text-align: center;
        background-color: #F0E68C;
    }

    .header3 li {
        display: table-cell;
        min-width: 50px;
    }

    .header3 li a {
        display: block;
        width: 200px;
        padding: 10px 0;
        text-decoration: none;
        color: #555;
        font-weight: bold;
    }

    .header3 li:hover {
        background-color: #FFF2CC;
    }
    .service{
        width: 100%;
        margin: 0 auto;
    }
    
    .service1 img{
        width: 60%;
        margin: 0 auto;
        margin-bottom: 5%;
    }
    .service2{
        margin-top: 3%;
        display: flex;
        justify-content: space-around;
        margin-bottom: 3%;
    }
    .service3 p{
        font-size: large;
        font-weight: bold;
    }
    .service4 p{
        font-size: large;
        font-weight: bold;
    }
    .service3 li p{
        font-size: smaller;
    }
    .service4 li p{
        font-size: smaller;
    }
    .tab-3 {
    display: flex;
    flex-wrap: wrap;
    max-width: 80%;
    margin: 0 auto;
    margin-bottom: 5%;
}

.tab-3 > label {
    flex: 1 1;
    order: -1;
    min-width: 70px;
    padding: .7em 1em .5em;
    background-color: #f2f2f2;
    color: #999;
    font-weight: 600;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
}

.tab-3 > label:hover {
    opacity: .8;
}

.tab-3 input {
    display: none;
}

.tab-3 > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    background-color: #fff;
}

.tab-3 label:has(:checked) {
    border-bottom: 4px solid #2589d0;
    color: #2589d0;
}

.tab-3 label:has(:checked) + div {
    display: block;
}
    .taxi {
        width: 100%;
    }
    
    .taxi1 {
       color: #555;
        font-size: x-large;
        text-align: center;
        padding: 2%;
        background-color: #FAE488;
        margin-bottom: 5%;
    }
    .taxi2 {
        width: 50%;
        padding: 20px;
        margin: 0 20px 20px 20px;
        background: #EDFFBE;
        color: #fff;
        box-sizing: border-box;
        margin: 0 auto;
    }
    
    .taxi2 p {
        color: #555;
        text-align: center;
        padding-top: 3%;
    }
    
    .taxi3 {
        width: 100%;
        padding-left: 8%;
        margin: 0 auto;
    }
    .taxi3 p{
        color: #555;
        text-align: center;
        padding-top: 2%;
    }
    .question{
        width: 100%;
        margin-bottom: 5%;
    }
    .question1{
        width: 100%;
        font-size: xx-large;
        text-align: center;
        padding: 2%;
        background-color: #FAE488;
        margin-bottom: 5%;
    }
    .question2{
        width: 60%;
       
        margin: 0 auto;
    }
    
    .cp_qa *, .cp_qa *:after, .cp_qa *:before {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }
    .cp_qa .cp_actab {
        position: relative;
        overflow: hidden;
        width: 100%;
        margin: 0 0 1em 0;
        color: #1b2538;
    }
    .cp_qa .cp_actab input {
        position: absolute;
        opacity: 0;
    }
    /* 質問 */
    .cp_qa .cp_actab label {
        font-weight: bold;
        line-height: 1.6em;
        position: relative;
        display: block;
        margin: 0 0 0 0;
        padding: 1em 2em 1em 2.5em;
        cursor: pointer;
        text-indent: 1em;
        border-radius: 0.5em;
        background: rgba(27,37,56,0.1);
    }
    .cp_qa .cp_actab label::before {
        font-family: serif;
        font-size: 1.5em;
        margin-left: -2em;
        padding-right: 0.5em;
        content: 'Q';
    }
    .cp_qa .cp_actab label:hover {
        transition: all 0.3s;
        color: #00838f;
    }
    /* --質問の＋アイコン */
    .cp_qa .cp_actab label::after {
        font-size: 1.7em;
        font-weight: bold;
        line-height: 2em;
        position: absolute;
        top: 0;
        right: 0;
        content: '＋';
        display: inline-block;
        width: 2em;
        height: 2em;
        -webkit-transition: transform 0.4s;
                transition: transform 0.4s;
    }
    /* 答え */
    .cp_qa .cp_actab .cp_actab-content {
        position: relative;
        overflow: hidden;
        max-height: 0;
        padding: 0 0 0 2.5em;
        -webkit-transition: max-height 0.2s;
                transition: max-height 0.2s;
        border-radius: 0 0 0.5em 0.5em;
    }
    .cp_qa .cp_actab .cp_actab-content::before {
        font-family: serif;
        font-size: 1.5em;
        position: absolute;
        margin: 0.4em 0 0 -1em;
        padding: 0;
        content: 'A';
    }
    .cp_qa .cp_actab .cp_actab-content p {
        margin: 1em 1em 1em 0;
    }
    /* 質問を開いた時の仕様 */
    /* --答えの高さ */
    .cp_qa .cp_actab input:checked ~ .cp_actab-content {
        max-height: 40em;
        border: 10px solid rgba(27,37,56,0.1);
    }
    /* 質問をクリックした時のアイコンの動き */
    .cp_qa .cp_actab input:checked ~ label {
        color: #00838f;
        border-radius: 0.5em 0.5em 0 0;
    }
    /* 質問をクリックした時の+の動き */
    .cp_qa .cp_actab input[type=checkbox]:checked + label::after {
        -webkit-transform: rotateZ(45deg);
        transform: rotateZ(45deg);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }

    .footer {
        width: 100%;
       
        margin: 0 auto;
        background-image: url(../img/tb-footer.png);

    }
    .footer1 {
        width: 100%;
    }

    .footer1 ul {
        display: table;
        margin: 0 auto;
        padding: 0;

        width: 80%;
        text-align: center;
        background-color: #FFEE7D;
    }

    .footer1 li {
        display: table-cell;
        min-width: 50px;
    }

    .footer1 li a {
        display: block;
        width: 180px;
        padding: 10px 0;
        text-decoration: none;
        color: #555;
        font-weight: bold;
    }

    .footer1 li:hover {
        background-color: #FFF2CC;
    }

    .footer2 {
        text-align: center;
        margin-top: 20%;
    }
}
/*SPサイズレスポンシブ*/

@media(min-width:0px) and (max-width:599px) {
    body {
        max-width: 599px;
        background-color: lightcyan;
        color: #00648c;
    }

    .container {
        width: 100%;
    }


    .header {
        width: 100%;
        padding-top: 3%;
        background-image: url(../img/sp-header.png);
        background-repeat: no-repeat;
        background-color: lightcyan;
        margin-bottom: 10%;
    }

    .header_outer {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .header1 {
        width: 30%;
        margin-left: 10%;
    }

    .header2 {
        text-align: center;
        color: #00648c;
        margin-left: 5%;
    }

    .header2 h1 {
        font-size: medium;
    }

    .header2 h2 {
        font-size: medium;
    }

    .header2 p {
        font-size: small;
    }

    .header3 {
        display: none;
    }

    /*========= ナビゲーションのためのCSS ===============*/

    #g-nav {
        /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
        position: fixed;
        z-index: 999;
        /*ナビのスタート位置と形状*/
        top: 0;
        right: -120%;
        width: 100%;
        height: 100vh;
        /*ナビの高さ*/
        background: #FFEE7D;
        /*動き*/
        transition: all 0.6s;
    }

    /*アクティブクラスがついたら位置を0に*/
    #g-nav.panelactive {
        right: 0;
    }

    /*ナビゲーションの縦スクロール*/
    #g-nav.panelactive #g-nav-list {
        /*ナビの数が増えた場合縦スクロール*/
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100vh;
        /*表示する高さ*/
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    /*ナビゲーション*/
    #g-nav ul {
        /*ナビゲーション天地中央揃え*/
        position: absolute;
        z-index: 999;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /*リストのレイアウト設定*/

    #g-nav li {
        list-style: none;
        text-align: center;
    }

    #g-nav li a {
        color: #333;
        text-decoration: none;
        padding: 10px;
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: bold;
        width: 250px;
    }
    .service{
        width: 100%;
        margin: 0 auto;
    }
    
    .service1 img{
        width: 80%;
        margin: 0 auto;
        margin-bottom: 5%;
    }
    .service2{
        margin-top: 3%;
        margin-bottom: 3%;
      width: fit-content;
      margin: 0 auto;
    }
    .service2 p{
        text-align: center;
    }
    .service3 p{
        font-size: large;
        font-weight: bold;
    }
    .service4 p{
        font-size: large;
        font-weight: bold;
    }
    .service3 li p{
        font-size: smaller;
    }
    .service4 li p{
        font-size: 11px;
    }

    .tab-3 {
    display: flex;
    flex-wrap: wrap;
    max-width: 500px;
    margin-bottom: 5%;
}

.tab-3 > label {
    flex: 1 1;
    order: -1;
    min-width: 70px;
    padding: .7em 1em .5em;
    background-color: #f2f2f2;
    color: #999;
    font-weight: 600;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
}

.tab-3 > label:hover {
    opacity: .8;
}

.tab-3 input {
    display: none;
}

.tab-3 > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    background-color: #fff;
}

.tab-3 label:has(:checked) {
    border-bottom: 4px solid #2589d0;
    color: #2589d0;
}

.tab-3 label:has(:checked) + div {
    display: block;
}
    .taxi {
        width: 100%;
        
    }
    
    .taxi1 {
       color: #555;
        font-size: large;
        text-align: center;
        padding: 2%;
        background-color: #FAE488;
        margin-bottom: 5%;
    }
    .taxi2 {
        width: 280px;
        padding: 20px;
        margin: 0 20px 20px 20px;
        background: #EDFFBE;
        color: #fff;
        box-sizing: border-box;
        margin: 0 auto;
    }
    
    .taxi2 p {
        color: #555;
        text-align: center;
        padding-top: 3%;
    }
    
    .taxi3 {
        width: 80%;
        padding-left: 3%;
        margin: 0 auto;
        
    }
    .taxi3 p{
        color: #555;
        text-align: center;
        padding-top: 2%;
    }
    .question{
        width: 100%;
        margin-bottom: 5%;
    }
    .question1{
        width: 100%;
        color: #555;
        font-size: large;
        text-align: center;
        padding: 2%;
        background-color: #FAE488;
        margin-bottom: 5%;
    }
    .question2{
        width: 60%;
       
        margin: 0 auto;
    }
    
    .cp_qa *, .cp_qa *:after, .cp_qa *:before {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }
    .cp_qa .cp_actab {
        position: relative;
        overflow: hidden;
        width: 100%;
        margin: 0 0 1em 0;
        color: #1b2538;
    }
    .cp_qa .cp_actab input {
        position: absolute;
        opacity: 0;
    }
    /* 質問 */
    .cp_qa .cp_actab label {
        font-weight: bold;
        line-height: 1.6em;
        position: relative;
        display: block;
        margin: 0 0 0 0;
        padding: 1em 2em 1em 2.5em;
        cursor: pointer;
        text-indent: 1em;
        border-radius: 0.5em;
        background: rgba(27,37,56,0.1);
    }
    .cp_qa .cp_actab label::before {
        font-family: serif;
        font-size: 1.5em;
        margin-left: -2em;
        padding-right: 0.5em;
        content: 'Q';
    }
    .cp_qa .cp_actab label:hover {
        transition: all 0.3s;
        color: #00838f;
    }
    /* --質問の＋アイコン */
    .cp_qa .cp_actab label::after {
        font-size: 1.7em;
        font-weight: bold;
        line-height: 2em;
        position: absolute;
        top: 0;
        right: 0;
        content: '＋';
        display: inline-block;
        width: 2em;
        height: 2em;
        -webkit-transition: transform 0.4s;
                transition: transform 0.4s;
    }
    /* 答え */
    .cp_qa .cp_actab .cp_actab-content {
        position: relative;
        overflow: hidden;
        max-height: 0;
        padding: 0 0 0 2.5em;
        -webkit-transition: max-height 0.2s;
                transition: max-height 0.2s;
        border-radius: 0 0 0.5em 0.5em;
    }
    .cp_qa .cp_actab .cp_actab-content::before {
        font-family: serif;
        font-size: 1.5em;
        position: absolute;
        margin: 0.4em 0 0 -1em;
        padding: 0;
        content: 'A';
    }
    .cp_qa .cp_actab .cp_actab-content p {
        margin: 1em 1em 1em 0;
    }
    /* 質問を開いた時の仕様 */
    /* --答えの高さ */
    .cp_qa .cp_actab input:checked ~ .cp_actab-content {
        max-height: 40em;
        border: 10px solid rgba(27,37,56,0.1);
    }
    /* 質問をクリックした時のアイコンの動き */
    .cp_qa .cp_actab input:checked ~ label {
        color: #00838f;
        border-radius: 0.5em 0.5em 0 0;
    }
    /* 質問をクリックした時の+の動き */
    .cp_qa .cp_actab input[type=checkbox]:checked + label::after {
        -webkit-transform: rotateZ(45deg);
        transform: rotateZ(45deg);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }
    .footer {
        width: 100%;
       height: 200px;
        margin: 0 auto;
        background-image: url(../img/tb-footer.png);

    }
    .footer1 {
        display: none;
    }

    .footer2 {
        text-align: center;
        padding-top: 10%;
    }

    .randomBox,
.randomScroll {
    width: 300px;
    flex-wrap: wrap;
}


.box {
    width: 300px;
    padding: 20px;
    margin: 0 20px 20px 20px;
    background: #EDFFBE;
    color: #fff;
    box-sizing: border-box;
    list-style: none;
}
}

    /*========= ボタンのためのCSS ===============*/
    .openbtn {
        position: fixed;
        z-index: 9999;
        /*ボタンを最前面に*/
        top: 10px;
        right: 10px;
        cursor: pointer;
        width: 50px;
        height: 50px;
    }

    /*×に変化*/
    .openbtn span {
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 14px;
        height: 3px;
        border-radius: 2px;
        background-color: #00838f;
        width: 45%;
    }

    .openbtn span:nth-of-type(1) {
        top: 15px;
    }

    .openbtn span:nth-of-type(2) {
        top: 23px;
    }

    .openbtn span:nth-of-type(3) {
        top: 31px;
    }

    .openbtn.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }

    .openbtn.active span:nth-of-type(2) {
        opacity: 0;
    }

    .openbtn.active span:nth-of-type(3) {
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }