@charset "UTF-8";
/**====================================
 * CSS information
 * file name	: sp.css
====================================**/
@media screen and (max-width: 767px) {
	
    /* body
	-------------------------------------------------- */
    body {
        font-size: 3.7333vw;
        min-width: inherit;
		letter-spacing: 0.04em;
    }
	
    /* Responsive
	-------------------------------------------------- */
    .pc {
        display: none;
    }
    .sp {
        display: inline;
    }

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


              // common parts //
	  

    /////////////////////////////////////////////////////////////////////////////*/
    
	/* ===============================================
        layout
	=============================================== */
	/* container
	-------------------------------------------------- */
	
    /* section
	-------------------------------------------------- */
	.section-wrap {
		padding: 0 5.3333%;
		box-sizing: border-box;
	}
	
	/* ===============================================
        font
	=============================================== */
	.s-txt {
		font-size: 2.6666vw;
	}
	
	/* ===============================================
        title
	=============================================== */
	/* sec-ttl
	-------------------------------------------------- */
	.sec-ttl {
	    text-align: center;
	    padding: 25px 0 30px;
	    position: relative;
	}
	.sec-ttl.sub {
	    padding: 40px 0 60px;
	}
	.sec-ttl__numb {
	    font-size: 64vw;
	    top: 40px;
	}
	.sec-ttl__numb.wht {
	    color: #FFFFFF;
	    opacity: 0.8;
	}
	.sec-ttl__pict {
	    width: 26%;
	    margin: 0 auto 10px;
	}
	.sec-ttl__subtitle {
	    font-size: 4.2666vw;
	    margin-bottom: 5px;
	}
	.sec-ttl__subtitle span {
	    padding: 0 15px;
	}
	.sec-ttl__subtitle span::before,
	.sec-ttl__subtitle span::after {
	    height: 24px;
	}
	.sec-ttl__title {
	    font-size: 7.4666vw;
	    padding-bottom: 20px;
	}
	.sec-ttl__title::after {
	    width: 75px;
	}
	.sec-ttl__lead {
	    font-size: 4vw;
	    margin-top: 20px;
	}
	.sub .sec-ttl__lead {
	    font-size: 3.7333vw;
		margin-top: 20px;
	}
	
	/* cont-ttl
	-------------------------------------------------- */
	.cont-ttl {
	    font-size: 6.4vw;
	    margin-bottom: 25px;
	}

	/* ===============================================
        btn
	=============================================== */
	/* btn
	-------------------------------------------------- */
	.btn a {
	    width: 100%;
	    font-size: 4.2666vw;
	    line-height: 1.5;
	}
	.btn a::before {
	    border-radius: 6px;
	}
	.btn a span {
	    border-radius: 6px;
		padding: 23px 0;
	}
	.btn a span::after {
	    width: 26px;
	    height: 26px;
	    right: 20px;
	    background-size: 6px auto;
	}
	.header-btn a {
		display: block;
	    width: 195px;
	    font-size: 1.3rem;
	    line-height: 1.5;
	}
	.header-btn a::before {
		top: 2px;
	    border-radius: 50px;
	}
	.header-btn a span {
		border-radius: 50px;
		padding: 6px 10px 6px 0;
	}
	.header-btn a span::after {
	    width: 20px;
	    height: 20px;
	    right: 10px;
	}
	
	/* ===============================================
        list
	=============================================== */
	/* note-list
	---------------------------------------- */
	.note-list {
	    margin-top: 8px;
	}
	.note-list li {
	    font-size: 3.2vw;
	    letter-spacing: 0;
	}
	.note-list li .numb {
		width: 5%;
	}
	.note-list.numb li .numb {
		width: 8%;
	}
	.note-list li .numb + p {
		width: 95%;
	}
	.note-list.numb li .numb + p {
		width: 92%;
	}
	.tab-block-bottom .note-list li,
	.sec-service-special-cont .note-list li {
	    font-size: 3.2vw;
	}

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


              // header //
	  

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

    /* header
	-------------------------------------------------- */
	.header {
	    height: 50px;
	}
	.header-inner {
	    height: 50px;
	}
	.header-logo {
	    width: 46px;	
		left: 10px;
	}
	.header-btn {
		right: 10px;
		top: 9px;
	}
	
	/*/////////////////////////////////////////////////////////////////////////////


              // visual //
	  

	/////////////////////////////////////////////////////////////////////////////*/
	.visual::before {
	    height: 15px;
		overflow: hidden;
	}
	.visual-inner {
	    padding: 30px 0 0;
		overflow: hidden;
	}
	.visual-cont {
	    position: relative;
	    padding-bottom: 25px;
	}
	.visual-cont__lead {
	    font-size: 4.2666vw;
	    margin-bottom: 7px;
	}
	.visual-cont__copy {
	    font-size: 4.8vw;
	    margin-bottom: 15px;
	}
	.visual-cont__copy span {
	    font-size: 9.0666vw;
	}
	.visual-cont__txtlist {
	    display: flex;
	    justify-content: center;
		flex-wrap: wrap;
		padding: 0 3%;
	}
	.visual-cont__txtlist li {
	    position: relative;
	    margin: 0 2px 7px;
	    padding: 0 4px;
	}
	.visual-cont__txtlist li::before,
	.visual-cont__txtlist li::after {
	    width: 4px;
	    height: 26px;
	    border-top: 13px solid #ffbe00;
	    border-bottom: 13px solid #ffbe00;
	}
	.visual-cont__txtlist li::before {
	    border-left: 4px solid transparent;
	}
	.visual-cont__txtlist li::after {
	    border-right: 4px solid transparent;
	}
	.visual-cont__txtlist li span {
	    line-height: 26px;
	    padding: 0 5px;
		font-size: 2.9333vw;
	}
	.visual-cont__balloon__txt01 {
	    width: 70px;
	    top: 20px;
	    left: 15px;
	}
	.visual-cont__balloon__txt02 {
	    width: 69px;
	    top: 20px;
	    right: 15px;
	}
	.visual-cont__balloon__txt03 {
	    width: 79px;
	    top: inherit;
		bottom: 0;
	    left: -5px;
	}
	.visual-cont__balloon__txt04 {
	    width: 76px;
	    top: inherit;
		bottom: -3px;
	    right: -5px;
	}
	.visual-item {
	    padding: 0 15px;
	}
	
	/* ===============================================
	    anchor-link
	=============================================== */
	.anchorArea {
	    padding: 10px 0 35px;
	}
	.anchorArea__txt {
	    font-size: 3.7333vw;
	    margin-bottom: 20px;
	}
	.anchorArea__txt span.l-txt {
	    font-size: 6.9333vw;
	}
	.anchor-link {
	    display: block;
	}
	.anchor-link li {
	    width: 100%;
		margin-bottom: 15px;
	}
	.anchor-link li a {
	    text-align: left;
	}
	.anchor-link__pict {
	    width: 22.68%; 
	    top: 50%;
	    left: -10px;
	    transform: translateY(-50%);
	    padding: 5px 0;
	}
	.anchor-link__numb {
	    font-size: 24vw;
	    top: 50%;
	    left: 12%;
	    transform: translateY(-50%);
	}
	.anchor-link__ttl {
	    font-size: 3.7333vw;
	    padding: 30px 5px 30px 22%;
	}
	.anchor-link li:nth-child(2) .anchor-link__ttl {
		padding: 20px 5px 20px 22%;
	}
	.anchor-link__ttl span {
	    font-size: 4.8vw;
		line-height: 1.4;
		margin-top: 3px;
	}
	.anchor-link__arrow {
	    width: 30px;
	    bottom: inherit;
		top: 50%;
	    left: inherit;
		right: 10px;
	    transform: translateY(-50%);
	}
	
	/*/////////////////////////////////////////////////////////////////////////////


              // cvArea //
	  

	/////////////////////////////////////////////////////////////////////////////*/
	.cvArea {
	    width: 100%;
	    padding: 35px 0 40px;
	}
	.cvArea-inner {
		padding: 0 5.3333%;
	}
	.cvArea__subttl {
	    font-size: 3.7333vw;
	    letter-spacing: 0.04em;
	}
	.cvArea__ttl {
	    line-height: 1.5;
	    font-size: 5.666vw;
	    letter-spacing: 0.04em;
	    margin-bottom: 25px;
	}
	
	/*/////////////////////////////////////////////////////////////////////////////


              // contents //
	  

	/////////////////////////////////////////////////////////////////////////////*/
	
	/* ===============================================
        failureArea
	=============================================== */
	.failureArea {
	    padding-bottom: 20px;
	}
	.failure-list {
	    padding: 0;
	}
	.failure-list li {
	    width: 48%;
	    font-size: 3.7333vw;
	    margin-bottom: 30px;
	}
	.failure-list__icon {
	    width: 75%;
	    margin: 0 auto 7px;
	}
	
	/* ===============================================
        shopArea
	=============================================== */
	.shopArea {
	    padding: 40px 0;
	}
	.shopArea-col2 {
	    display: block;
	}
	.shopArea-col2__img {
	    width: 100%;
	}
	.shopArea-col2__img::before {
	    left: 7px;
	    top: 7px;
	}
	.shopArea-col2__inner {
	    width: 100%;
	    min-width: inherit;
	}
	.shopArea-col2__inner .ttl {
	    font-size: 5.0666vw;
	    padding: 30px 0 20px;
	    margin-bottom: 15px;
		line-height: 1.5;
	}
	.shopArea-col2__inner .ttl::after {
	    width: 45px;
	    height: 3px;
	}
	
	/* ===============================================
        consultationArea
	=============================================== */
	.consultationArea {
	    padding-bottom: 40px;
	}
	.consultationArea .sec-ttl {
		padding-bottom: 15px;
	}
	
	/* tab-contents
	-------------------------------------------------- */
	.tab-btn {
		display: none;
	}
	.tab-btn li {
	    width: 32.5%;
	    line-height: 1.3;
	    font-size: 3.4666vw;
	    border-radius: 4px 4px 0 0;
	}
	.tab-btn li span {
	    font-size: 2.9333vw;
		margin-bottom: 3px;
	}
	.tab-block {
	    border: 2px solid #27acc9;
	    padding: 20px;
		margin-bottom: 20px;
	}
	.tab-block__ttl {
	    margin-bottom: 15px;
	}
	.tab-block__ttl .en {
	    font-size: 3.7333vw;
	}
	.tab-block__ttl .ttl {
	    font-size: 5.8666vw;
	}
	.tab-block-col2 {
	    display: block;
	}
	.tab-block-col2__left {
	    width: 100%;
		margin-bottom: 20px;
	}
	.tab-block-col2__left__txt {
	    padding: 5px 0;
	    margin: 10px 0;
	}
	.tab-block-col2__right {
	    width: 100%;
	}
	.tab-block-slider__cont {
	    border: 1px solid #d9d9d9;
	    box-sizing: border-box;
	    padding: 5px 15px 20px;
	}
	.tab-block-slider__cont__ttl {
	    background-size: 24px auto;
	    padding: 10px 0 10px 40px;
	    margin-bottom: 20px;
	    font-size: 4.2666vw;
	    line-height: 1.5;
	}
	.tab-block-slider__cont__ttl .en {
	    font-size: 4.8vw;
	}
	
	/* tab-btn-accordion
	-------------------------------------------------- */
	.tab-btn-accordion {
		display: block;
	    width: 100%;
	    line-height: 1.4;
	    padding: 15px 20px 17px;
		margin-top: 15px;
	    position: relative;
	    cursor: pointer;
	    transition: .3s;
	    border: 2px solid #27acc9;
	    color: #27acc9;
		box-sizing: border-box;
	}
	.tab-btn-accordion p {
		font-size: 4.8vw;
		font-weight: 700;
	}
	.tab-btn-accordion p span {
	    display: block;
		font-size: 3.7333vw;
	}
	.tab-btn-accordion.ac {
		border-radius: 4px 4px 0 0;
	    background: #27acc9;
	    color: #FFFFFF;
	}
	.plus {
	    width: 30px;
	    height: 30px;
	    position: absolute;
	    right: 15px;
	    top: 50%;
	    transform: translateY(-50%);
	    background: #27acc9;
	    border-radius: 50%;
	}
	.plus::before,
	.plus::after {
	    content: "";
	    width: 14px;
	    height: 2px;
	    background: #FFFFFF;
	    position: absolute;
	    top: 50%;
	    left: 8px;
	    margin-top: -1px;
	}
	.plus::after {
	    transform: rotate(90deg);
	    transition: opacity .2s;
	}
	.ac .plus {
		background: #FFFFFF;
	}
	.ac .plus::before {
		background: #27acc9;
	}
	.ac .plus::after {
	    opacity: 0;
	}
	
	/* case.1
	-------------------------------------------------- */
	.case-col3 {
	    flex-wrap: wrap;
	}
	.case-col3 li {
	    width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid #d9d9d9;
		padding-bottom: 20px;
		margin-bottom: 15px;
	}
	.case-col3 li:last-child {
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 0;
	}
	.case-col3__ttl {
	    font-size: 4vw;
		width: 100%;
		margin-bottom: 8px;
	}
	.case-col3__pict {
	    width: 34%;
	    margin: 0;
	}
	.case-col3__txt {
		width: 60%;
	    font-size: 3.2vw;
	}
	.case01_img02 {
	    width: 100%;
	    padding: 0 0 15px;
	}
	.case01_img03 {
	    width: 100%;
	    padding: 0;
	}
	
	/* case.2
	-------------------------------------------------- */
	.case02_txt {
	    font-size: 3.7333vw;
	    margin-bottom: 20px;
		letter-spacing: 0;
	}
	.case02_txt .blu {
	    font-size: 4vw;
	    color: #27acc9;
	    padding-bottom: 20px;
	}
	.case_img {
	    width: 100%;
	}
	
	/* ===============================================
        serviceArea
	=============================================== */
	.serviceArea {
	    padding-bottom: 20px;
	}
	
	/* box-cont
	---------------------------------------- */
	.box-cont-wrap {
	    margin-bottom: 30px;
	}
	.box-cont {
	    margin-bottom: 15px;
	}
	.box-cont__ttl {
	    font-size: 5.0666vw;
	    padding: 15px;
	    border-radius: 4px 4px 0 0;
	}
	.box-cont-inner {
	    padding: 20px;
	}
	.sec-service-mainttl {
	    padding: 0;
	    margin-bottom: 50px;
	    display: block;
	}
	.sec-service-mainttl__txt {
	    width: 100%;
		text-align: center;
	}
	.sec-service-mainttl__txt .subttl {
	    font-size: 5.8666vw;
	    margin: 0 0 10px;
	}
	.sec-service-mainttl__txt .subttl span {
	    background-size: 18px auto;
	    padding: 0 3px;
	}
	.sec-service-mainttl__txt .ttl {
	    font-size: 6.4vw;
	}
	.sec-service-mainttl__txt .ttl span {
	    font-size: 10.6666vw;
	}
	.sec-service-mainttl__pict {
	    width: 75%;
		margin: 15px auto 0;
	}
	.sec-service-special {
	    display: block;
	    margin-bottom: 25px;
	}
	.sec-service-special-cont {
	    width: 100%;
	    padding: 13% 15px 20px;
	    font-size: 3.2vw;
	    letter-spacing: 0em;
	}
	.sec-service-special-cont:first-child {
		border-bottom: none;
		padding-bottom: 45px;
	}
	.sec-service-special-cont__ttl {
	    width: 80%;
	    height: auto;
	    background-size: 100% auto;
	    font-size: 4.8vw;
	    line-height: 1.5;
		padding: 1% 0 5%;
	}
	.sec-service-special-cont__txt {
	    border-bottom: 1px solid #d9d9d9;
	    padding-bottom: 25px;
	    margin-bottom: 15px;
	}
	.sec-service-special-cont__txt .icon {
	    width: 80px;
	    margin-right: 15px;
	}
	.sec-service-special-cont__txt .ttl {
		width: calc(100% - 95px);
	    font-size: 5.0666vw;
	}
	.sec-service-app {
	    padding: 20px 15px 30px;
	}
	.sec-service-app__ttl {
	    font-size: 5.8666vw;
	    padding-bottom: 15px;
	    margin-bottom: 25px;
		line-height: 1.5;
	}
	.sec-service-app__cont {
	    display: flex;
		align-items: center;
		justify-content: center;
	}
	.sec-service-app__cont li {
	    display: block;
	    margin: 0 5px;
	}
	.sec-service-app__cont .app-btn {
	    height: auto;
	    margin-right: 0;
	}
	.sec-service-app__cont .app-qr {
	    display: none;
	}
	.sec-service-app__cont .app-btn img,
	.sec-service-app__cont .app-qr img {
	    width: 100%;
	    height: auto;
	}
	.sec-service-ttl {
	    border-bottom: 1px solid #27acc9;
	    display: block;
	    padding-bottom: 15px;
	    margin-bottom: 15px;
	}
	.sec-service-ttl__logo {
	    width: 75%;
		margin: 15px auto 20px;
	}
	.sec-service-ttl__txt {
	    width: 100%;
		text-align: center;
	}
	.sec-service-ttl__txt .subttl {
	    font-size: 4.8vw;
	}
	.sec-service-ttl__txt .ttl {
	    font-size: 6.4vw;
	}
	.sec-service-ttl__txt .ttl .ja {
	    font-size: 9.6vw;
	}
	.sec-service-ttl__txt .ttl .en {
	    font-size: 12vw;
	}
	
	/* box-cont-col2
	---------------------------------------- */
	.box-cont-col2 {
	    display: block;
	}
	.box-cont-col2 li {
	    width: 100%;
	    align-items: flex-start;
	    font-size: 3.7333vw;
		margin-bottom: 20px;
	}
	.box-cont-col2 li:last-child {
		margin-bottom: 10px;
	}
	.box-cont-col2 li .thumb {
	    width: 100px;
	    margin-right: 15px;
	}
	.box-cont-col2 li .thumb::after {
	    padding-top: 100%;
	}
	.box-cont-col2 li .thumb + div {
		width: calc(100% - 115px);
	}
	.box-cont-col2 li .thumb + div p {
		line-height: 1.5;
	}
	.box-cont-col2 li .s-txt {
	    margin-top: 5px;
	}
	
	/* ===============================================
        faqArea
	=============================================== */
	.faqArea {
	    padding: 40px 0 35px;
	}
	.faq-block {
	    padding: 0 15px;
	    margin-bottom: 15px;
	}
	.faq-block-q {
	    font-size: 4.2666vw;
	    padding: 20px 0 15px 5px;
	    position: relative;
	}
	.faq-block-q .txt {
	    width: calc(100% - 35px);
	    padding-top: 0;
		letter-spacing: 0.04em;
	}
	.faq-block-a__inner {
	    padding: 15px 0 20px 5px;
	}
	.faq-block-a .txt {
	    width: calc(100% - 35px);
	}
	.faq-block-q .en, .faq-block-a .en {
	    width: 35px;
	    font-size: 6.4vw;
	}
	
	/* ===============================================
        aboutArea
	=============================================== */
	.aboutArea {
	    padding-bottom: 40px;
	}
	
	
	/*/////////////////////////////////////////////////////////////////////////////


              // footer //
	  

	/////////////////////////////////////////////////////////////////////////////*/
	.footer {
	    padding: 40px 0;
	}
	.footer .section-wrap {
	    display: block;
	}
	.ft-logo {
	    width: 70%;
		margin: 0 auto 20px;
	}
	.footer-inner {
	    width: 100%;
	}
	.ft-nav {
	    text-align: center;
	}
	.ft-nav li {
	    display: inline-block;
	    position: relative;
	    margin: 0 3px;
	}
	.ft-nav li a {
	    font-size: 2.6666vw;
	    position: relative;
	    padding-left: 0;
	}
	.ft-nav li a::before {
		display: none;
	}
	.copyright {
	    text-align: center;
	    font-size: 2.6666vw;
	    margin-top: 25px;
	}
	.pagetop {
		width: 36px;
		bottom: 15px;
		right: 10px;
	}
	
}