@charset "UTF-8";

/**====================================

 * CSS information

 * file name	: style-sp.css

====================================**/

@media screen and (max-width: 767px) {

	

    /*/////////////////////////////////////////////////////////////////////////////





              // TOP //

	  



	/////////////////////////////////////////////////////////////////////////////*/

    

    /* ==================================================

        visual

    ================================================== */

	.visual {

	    height: 420px;

        background: url("/img/main_sp.webp");

        background-position: center left;

        background-repeat: no-repeat;

        background-size: cover;

        margin-bottom: 15px;

	}



	.visual .inner {

		height: 100%;

		margin: 10% auto auto auto;

		position: relative;

		text-align: center;

		padding: 35px 0 0;

		box-sizing: border-box;

	}



	.visual .inner {

	    padding: 15px 2% 0;

	}

    

    /* visual__lead

    -------------------------------------------------- */

    .visual-lead {

        padding: 35px 70px 15px;

    }

    .circle-item._item01 {

        width: 188px;

        height: 188px;

    }

    .circle-item._item02 {

        width: 154px;

        height: 154px;

        left: 18px;

        top: 18px;

    }

    .circle-item._item02::after {

        left: -25px;

        top: calc(50% - 18px);

    }

    .circleText__text {

        font-size: 1.5rem;

    }

    .circleText__text tspan {

        font-size: 2.0rem;

    }

    .ribbon-txt {

        height: 29px;

    }

    .ribbon-txt:before,

    .ribbon-txt:after {

        width: 18px;

        bottom: -5px;

    }

    .ribbon-txt:before {

        left: -18px;

        border: 14px solid #ED4466;

        border-left: 6px solid transparent;

    }

    .ribbon-txt:after {

        right: -18px;

        border: 14px solid #ED4466;

        border-right: 6px solid transparent;

    }

    .ribbon-txt p {

        font-size: 1.5rem;

        line-height: 26px;

        padding: 0 15px 3px;

    }

    .ribbon-txt p:before,

    .ribbon-txt p:after {

        border-bottom: solid 5px transparent;

    }

    .ribbon-txt p:before {

        border-right: solid 20px #ffffff;

    }

    .ribbon-txt p:after {

        border-left: solid 20px #ffffff;

    }

    

    /* visual-ttl

    -------------------------------------------------- */

    .visual-ttl {

        padding-bottom: 10px;

    }

    .visual-ttl .ttl {

        font-size: 1.5rem;

    }

    .visual-ttl .ttl span {

        font-size: 3.6rem;

    }

    

    /* .visual-point

    -------------------------------------------------- */

    .visual-point {}

    .v-point-item {

        width: 100px;

        height: 100px;

        font-size: 1.0rem;

        line-height: 1.3;

        margin: 0 3px;

    }

    /*.v-point-item::before {

        width: 100px;

        height: 100px;

    }*/

    .v-point-item .note {

        font-size: 0.9rem;

        line-height: 1;

        transform-origin: top center;

        margin-top: -1px;

    }

    .v-point-item._item01 {

        font-size: 1.2rem;

    }

    .v-point-item._item01 ._grn {

        font-size: 3.0rem;

    }

    .v-point-item._item02 ._grn {

        font-size: 1.4rem;

        padding-bottom: 2px;

    }

    .v-point-item._item02 ._small {

        font-size: 1.0rem;

    }

    .v-point-item._item02 ._en {

        font-size: 1.8rem;

        padding-right: 1px;

    }

    .v-point-item._item03 {

        padding-bottom: 3px;

    }

    .v-point-item._item03 ._grn {

        font-size: 1.4rem;

        padding-bottom: 4px;

    }

    

    /* visual-img

	-------------------------------------------------- */

    .visual-img01 {

        width: 95px;

        left: 6%;

        bottom: 45px;

    }

    .visual-img02 {

        width: 200px;

        right: 4%;

    }

    

    /* ==================================================

        sp-cta

    ================================================== */

    .sp-cta {

        display: block;

    }

    

    /* ==================================================

        sec-weather

    ================================================== */

    .sec-weather {

        width: 100vw;

        padding: 40px 15px 20px 15px;

        overflow-x: scroll;

        box-sizing: border-box;

    }

    .sec-weather-scroll {

        min-width: 560px;

    }

    #location {

        font-size: 1.4rem;

        margin-bottom: 10px;

    }

    #location span {

        font-size: 1.0rem;

    }

    .weather .date {

        font-size: 1.1rem;

    }

    .weather .icon {

        width: 30px;

        height: 30px;

        margin: 3px auto;

    }

    .weather .temp {

        font-size: 1.0rem;

    }

    .weather .tempMin {

        font-size: 1.0rem;

        margin-right: 3px;

    }

    .weather .tempMax {

        font-size: 1.0rem;

        margin-right: 3px;

    }

    

    

    /* ==================================================

        t-sec-ttl

    ================================================== */

    .t-sec-ttl {

        padding-bottom: 25px;

    }

    .t-sec-ttl .icon {

        width: 50px;

    }

    .t-sec-ttl .ttl {

        font-size: 2.4rem;

        padding: 5px 0;

    }

    

    /* ==================================================

        t-about

    ================================================== */

    .t-about {

        padding: 30px 0 50px;

    }

    .t-about-slider {

        padding: 0 16.5% 35px;

    }

    .t-about-block {

        padding: 30px 10px 35px;

    }

    .t-about-block .numb {

        width: 54px;

        height: 45px;

        font-size: 1.8rem;

        padding: 7px 5px 0 0;

    }

    .t-about-block .icon {

        width: 86px;

    }

    /* ==================================================

        t-lineup

    ================================================== */

    .t-lineup {

        padding: 30px 0 40px;

    }

    .t-lineup-list {

        margin-bottom: 10px;

    }

    .t-lineup-block {

        width: 48.5%;

        margin-bottom: 3%;

    }

    .t-lineup-block a {

        padding: 3px;

    }

    .t-lineup-block .ttl {

        font-size: 1.3rem;

        padding: 5px 5px 6px;

    }

    .t-lineup-block .fig {

        padding: 15px 7px 12px;

    }

    /* t-equipment

	-------------------------------------------------- */

    .t-equipment-ttl {

        font-size: 1.6rem;

        margin-bottom: 10px;

    }

    .t-equipment-ttl span {

        padding: 0 15px;

    }

    .t-equipment-ttl span::before,

    .t-equipment-ttl span::after {

        height: 20px;

    }

    .box-list {

        margin-bottom: -2%;

    }

    .box-list li {

        width: 49%;

        font-size: 1.2rem;

        padding: 9px 5px 10px;

        margin-bottom: 2%;

    }

    

    /* ==================================================

        t-hoken

    ================================================== */

    .t-hoken {

        padding: 0 0 50px;

        margin-bottom: 0;

    }

    .t-hoken .t-hoken-img {

        width: 100%;

        height: auto;

        position: static;

    }

    .t-hoken .t-hoken-img .thumb::after {

        padding-top: 56.8%;

    }

    .t-hoken .section-inner {

        display: block;

    }

    .t-hoken-block {

        width: 100%;

        padding: 30px 0 0;

        margin: -40px 0 0;

        border-radius: 8px;

    }

    .t-hoken-block .figtxt {

        width: 175px;

        left: 15px;

        top: -20px;

    }

    .t-hoken-block .ttl {

        font-size: 2.4rem;

        margin-bottom: 20px;

    }

    .t-hoken-block .btn {

        margin-top: 30px;

    }

    

    /* ==================================================

        t-flow

    ================================================== */

    .t-flow {

        margin-bottom: 0;

    }

    .t-flow-wrap {

        width: 100%;

        margin: 0 auto;

    }

    .t-flow-block {

        display: block;

        padding-bottom: 22px;

        margin-bottom: 30px;

    }

    .t-flow-block:last-child {

        padding-bottom: 0;

    }

    .t-flow-block::after {

        width: 16px;

        height: 16px;

        bottom: -9px;

    }

    .t-flow-block .numb {

        display: block;

        width: 100%;

        border-radius: 8px;

        padding: 9px 10px 6px;

        margin-bottom: 15px;

        box-sizing: border-box;

    }

    .t-flow-block .numb p {

        font-size: 1.3rem;

    }

    .t-flow-block .numb p span {

        display: inline-block;

        font-size: 2.2rem;

        vertical-align: middle;

        padding-left: 5px;

        transform: translateY(-1px);

    }

    .t-flow-cont {

        width: 100%;

        text-align: center;

    }

    .t-flow-cont .ttl {

        font-size: 1.8rem;

        margin-bottom: 7px;

    }

    .t-flow-cont .cont-col2 {

        display: block;

    }

    .t-flow-block .cont-col2 .inner {

        width: 100% !important;

        margin-bottom: 15px;

    }

    .t-flow-block .cont-col2 .side {

        width: 100% !important;

    }

    .t-flow-block._step02 .cont-col2 .side img {

        width: 57.1855%;

    }

    .t-flow-block .list-note {

        text-align: left;

    }

    .t-flow-block._step05 ._red {

        font-size: 1.2rem;

    }

    

    /*/////////////////////////////////////////////////////////////////////////////





              // About //

	  



	/////////////////////////////////////////////////////////////////////////////*/

    

    /* ==================================================

        Reason

    ================================================== */

    .reason-list {

        padding: 10px 0 0;

    }

    .reason-block {

        display: block;

        margin: 0 0 35px;

    }

    .reason-block:last-child {

        margin-bottom: 45px;

    }

    .reason-fig {

        width: 100%;

    }

    .reason-cont {

        width: 100%;

        padding-top: 15px;

    }

    .reason-block-ttl {

        padding-bottom: 8px;

        align-items: stretch;

    }

    .reason-block-ttl .numb {

        width: 50px;

        min-height: 43px;

        font-size: 2.2rem;

    }

    .reason-block-ttl .ttl {

        width: calc(100% - 68px);

        font-size: 1.8rem;

    }

    .reason-block .inner p {

        margin-bottom: 5px;

    }

    

    /* ==================================================

        Staff

    ================================================== */

    .section-box .sec-ttl:first-child {

        margin-top: 12px;

    }

    .staff-block {

        display: block;

        padding: 24px;

        margin-bottom: 10px;

        box-sizing: border-box;

    }

    .staff-info {

        width: 100%;

        padding: 0 0 16px;

        margin-bottom: 16px;

        border-right: none;

        border-bottom: 1px dashed #3CA4FF;

        display: flex;

        justify-content: space-between;

        align-items: flex-start;

    }

    .staff-info .icon {

        width: 72px;

        height: 72px;

        margin-bottom: 0;

    }

    .staff-info .inner {

        width: calc(100% - 88px);

        text-align: left;

    }

    .staff-info .position {

        margin: 4px 0 2px;

        justify-content: flex-start;

    }

    .staff-info .position-item {

        font-size: 1.0rem;

        padding: 1px 8px 2px;

        margin: 0 4px 4px 0;

    }

    .staff-info .name {

        font-size: 1.6rem;

        font-weight: 700;

    }

    .staff-cont {

        width: 100%;

    }

    .staff-detail .ttl {

        font-size: 1.2rem;

        margin-bottom: 8px;

    }

    .staff-detail .cont {

        font-size: 1.2rem;

        margin-bottom: 16px;

    }

    .staff-detail-goodlist {

        padding-top: 8px;

    }

    .staff-detail-goodlist li {

        padding: 0 8px 1px;

    }

    .staff-detail-table {

        padding-top: 8px;

    }

    .staff-detail-table dt {

        width: 38%;

        font-size: 1.2rem;

        padding: 9px 0 11px;

    }

    .staff-detail-table dd {

        width: calc(62% - 2px);

        padding: 9px 0 11px 5px;

    }

    

    /*/////////////////////////////////////////////////////////////////////////////





              // Line up //

	  



	/////////////////////////////////////////////////////////////////////////////*/

    

    /* lineup-anchor

	-------------------------------------------------- */

    .lineup-anchor {

        display: block;

        margin-bottom: 40px

    }

    .lineup-anchor-block {

        width: 100%;

        padding: 10px 15px 7px;

        margin-bottom: 10px;

    }

    .lineup-anchor-block .ttl {

        font-size: 1.4rem;

        padding-bottom: 6px;

    }

    .lineup-anchor-item {

        width: 48.5714%;

        margin-bottom: 8px;

    }

    .lineup-anchor-item a {

        font-size: 1.2rem;

        padding: 4px 8px 5px;

    }

    .lineup-anchor-item a::after {

        right: 8px;

    }

    .lineup-anchor-item .manufacturer {

        font-size: 1.0rem;

        padding: 0 8px;

        margin-bottom: 2px;

    }

    

    /* lineup-block

	-------------------------------------------------- */

    .lineup-block {

        display: block;

        margin-top: 24px;

    }

    .lineup-fig {

        width: 100%;

    }

    .lineup-fig .fig {

        padding: 10px 0 8px;

    }

    .lineup-ttl {

        font-size: 1.4rem;

    }

    .lineup-ttl::before {

        top: 0.64em;

    }

    .lineup-cont {

        width: 100%;

    }

    .lineup-info {

        margin-bottom: 15px;

    }

    .lineup-info p {

        font-size: 1.2rem;

    }

    .lineup-detail {

        display: block;

    }

    .lineup-detail .ttl {

        width: 100%;

        writing-mode: horizontal-tb;

        padding: 3px 12px 4px;

        box-sizing: border-box;

    }

    .lineup-detail-inner {

        width: 100%;

        padding: 5px 15px;

    }

    .lineup-table dt {

        width: 36%;

        font-size: 1.2rem;

        padding: 8px 0;

    }

    .lineup-table dd {

        width: calc(64% - 2px);

        font-size: 1.2rem;

        padding: 8px 0 8px 8px;

    }

    

    /*/////////////////////////////////////////////////////////////////////////////





              // Hoken //

	  



	/////////////////////////////////////////////////////////////////////////////*/

    

    /* ==================================================

        plan

    ================================================== */

    /* hoken-box-wrap

	-------------------------------------------------- */

    .hoken-box-wrap .sec-box:last-child {

        margin-top: 51px;

    }

    

    /* hoken-point-list

	-------------------------------------------------- */

    .hoken-point-list {

        display: block;

    }

    .hoken-point-list li {

        width: 100%;

        font-size: 1.2rem;

        display: block;

        padding: 10px;

    }

    .plus {

        width: 37px;

        height: 37px;

        top: -46px;

    }

    .plus::before,

    .plus::after {

        width: 15px;

        left: 11px;

    }

    

    /* hoken-standard

	-------------------------------------------------- */

    .hoken-standard-col2 {

        display: block;

    }

    .hoken-standard-col2 .inner {

        width: 100%;

    }

    .hoken-standard-table {

        margin-bottom: 10px;

    }

    .hoken-standard-table dt {

        width: 33%;

        font-size: 1.2rem;

        padding: 10px 0;

    }

    .hoken-standard-table dd {

        width: calc(67% - 2px);

        font-size: 1.2rem;

        padding: 10px 0 10px 10px;

    }

    .hoken-standard-block .ttl {

        font-size: 1.2rem;

        padding: 7px 15px;

        margin-bottom: 10px;

        font-weight: 700;

    }

    .hoken-standard-block li {

        font-size: 1.2rem;

    }

    

    /*/////////////////////////////////////////////////////////////////////////////





              // Faq //

	  



	/////////////////////////////////////////////////////////////////////////////*/

    .faq-block {

        padding-bottom: 5px;

    }

    .faq-block .question,

    .faq-block .answer {

        padding: 8px 15px 8px 35px;

        margin-bottom: 3px;

    }

    .faq-block .question {

        font-size: 1.4rem;

    }

    .faq-block .question::before,

    .faq-block .answer::before {

        font-size: 1.4rem;

        left: 13px;

        top: 7px;

    }

    .faq-block .answer p {

        margin-bottom: 8px;

    }

    

    /* ==================================================

        aaaaaaaaa

    ================================================== */

    

    /* ==================================================

        aaaaaaaaa

    ================================================== */

    

    /*/////////////////////////////////////////////////////////////////////////////





              // Access //

	  



	/////////////////////////////////////////////////////////////////////////////*/

    .access-map {

        height: 200px;

        margin-bottom: 30px;

    }

    

}