@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") center center 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 #E6822F;
        border-left: 6px solid transparent;
    }
    .ribbon-txt:after {
        right: -18px;
        border: 14px solid #E6822F;
        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 #1598D9;
        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;
    }
    
}