@charset "UTF-8";
/**====================================
 * CSS information
 * file name	: sp.css
 * author		: libretto works
====================================**/
@media screen and (max-width: 767px) {
    /* body
	-------------------------------------------------- */
    html {
        font-size: 62.5%;
    }
    body {
        font-size: 1.4rem;
        min-width: inherit;
    }
    /* Responsive
	-------------------------------------------------- */
    .pc {
        display: none;
    }
    .sp {
        display: inline;
    }
	
	/* cursor
	-------------------------------------------------- */
	.cursor,
	.follower {
		display: none;
	}
	
    /*/////////////////////////////////////////////////////////////////////////////


              // loading //
	  

    /////////////////////////////////////////////////////////////////////////////*/
	.loader-logo {
	    width: 50%;
	}
	
    /*/////////////////////////////////////////////////////////////////////////////


              // layout //
	  

    /////////////////////////////////////////////////////////////////////////////*/
    /* container
	-------------------------------------------------- */
	
    /* section
	-------------------------------------------------- */
	.section-wrap._90-0 {
	    padding-right: 6.6666%;
	}
	.section-wrap._110-0 {
	    padding-right: 6.6666%;
	}
	.section-wrap._0-90 {
	    padding-left: 6.6666%;
	}
	.section-wrap._0-110 {
	    padding-left: 6.6666%;
	}
	.section-wrap._90-110 {
	    padding-right: 6.6666%;
	    padding-left: 6.6666%;
	}
	.section-wrap._90 {
	    padding-right: 6.6666%;
	    padding-left: 6.6666%;
	}
	.section-wrap._110 {
	    padding-right: 6.6666%;
	    padding-left: 6.6666%;
	}
	.section-wrap._980 {
	    padding-right: 6.6666%;
	    padding-left: 6.6666%;
	}
	.section-low-wrap {
	    width: 100%;
	    margin: 0 auto 60px;
		box-sizing: border-box;
		padding-right: 6.6666%;
	    padding-left: 6.6666%;
	}
	.section-low-inner {
	    margin-top: 30px;
	}
	
    /*/////////////////////////////////////////////////////////////////////////////


              // header //
	  

	/////////////////////////////////////////////////////////////////////////////*/
	
    /* header
	-------------------------------------------------- */
	.header {
	    height: 60px;
		position: absolute;
		left: 0;
		top: 0;
	}
	.header-logo {
	    width: 135px;
	    position: absolute;
	    left: 5.3333%;
	    top: 17px;
	}

	
    /* nav
	-------------------------------------------------- */
	.header-inner {
		display: none;
	}
	
    /* menu-trigger
	-------------------------------------------------- */
	.menu-trigger {
	    width: 60px;
	    height: 40px;
	    top: 10px;
	    border-left: 1px solid #1a1a1a;
	}
	.menu-trigger span {
	    position: absolute;
	    top: 18px;
	    width: 4px;
	    height: 4px;
	    border-radius: 50%;
	    background: #1a1a1a;
	}
	.menu-trigger span:nth-of-type(1) {
	    left: 15px;
	}
	.menu-trigger span:nth-of-type(2) {
	    left: 27px;
	}
	.menu-trigger span:nth-of-type(3) {
	    left: 39px;
	}
	.open .menu-trigger span:nth-of-type(2) {
	    opacity: 0;
	}
	.open .menu-trigger span {
	    width: 28px;
	    height: 2px;
	    top: 18px;
	    left: 15px;
	}
	.open .menu-trigger span:nth-of-type(1) {
	    transform: rotate(-45deg);
	}
	.open .menu-trigger span:nth-of-type(3) {
	    transform: rotate(45deg);
	}
	
    /* fixed nav
	-------------------------------------------------- */
	.fixed-nav {
	    position: fixed;
	    left: 0;
	    top: 0;
	    width: 100vw;
	    height: 100vh;
	    background: #FFFFFF;
	    transition: all .3s;
	    z-index: 99998;
	    line-height: 2;
	    opacity: 0;
	    pointer-events: none;
	}
	.open .fixed-nav {
	    opacity: 1;
	    pointer-events: auto;
	}
	.fixed-wrap {
	    width: 100%;
	    height: 100vh;
	    display: block;
	}
	.fixed-inner {
	    width: 100%;
	    display: block;
	    padding: 70px 6.6666% 120px;
	}
	.fixed-nav nav {
	    width: 100%;
	    max-width: inherit;
	}
	.fixed-nav .m-nav {
	    line-height: 1.5;
	    display: block;
	    padding-top: 0;
	}
	.fixed-nav ul.m-nav-wrap > li {
	    margin-bottom: 25px;
	}
	.fixed-nav ul.m-nav-wrap > li > a {
	    font-size: 1.8rem;
		display: flex;
		justify-content: flex-end;
		flex-direction: row-reverse;
		border-bottom: 1px solid #d9d9d9;
		padding-bottom: 15px;
	}
	.fixed-nav ul.m-nav-wrap > li > a .en {
		font-size: 1.1rem;
	    margin-bottom: 0;
		padding: 11px 0 0 10px
	}
	.fixed-nav ul.m-nav-wrap > li > a .ja {
		text-decoration: none;
		display: block;
	}
	.fixed-nav .m-nav-inner {
	    margin-top: 15px;
	    padding: 0;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.fixed-nav .m-nav-inner li {
		width: 48%;
	    margin-bottom: 10px;
	}
	.fixed-nav .fixed-side {
	    width: 100%;
	    padding-bottom: 0;
	}
	.fixed-subnav {
	    margin-bottom: 40px;
	}
	.fixed-subnav li {
	    margin-bottom: 5px;
	}
	
	/*/////////////////////////////////////////////////////////////////////////////


              // bnr-area //
	  

	/////////////////////////////////////////////////////////////////////////////*/
	
	/* bnr-area
	-------------------------------------------------- */
	.bnr-area {
	    background: #fafafa;
	    padding: 25px 4% 20px;
	    opacity: 0;
	}
	.motion .bnr-area {
	    animation: fade 0.8s forwards;
	}
	.bnr-area ul {
	    display: flex;
	    justify-content: space-between;
		flex-wrap: wrap;
	}
	.bnr-area ul li {
		width: 48.5%;
	    margin: 0 0 2%;
	}
	.bnr-area ul a {
	    width: 100%;
	    height: auto;
	}

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


              // footer //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .footer {
        padding: 30px 6.6666% 50px;
        position: relative;
        opacity: 0;
    }
    .motion .footer {
        animation: fade 0.8s forwards;
    }
    .footer-inner {
        position: relative;
        display: block;
    }
	
    /* ft-nav
	-------------------------------------------------- */
    .ft-nav {
        display: block;
		margin-bottom: 50px;
    }
    .ft-nav ul.ft-nav-wrap {
		width: 100%;
        margin-left: 0;
        min-width: 110px;
    }
    .ft-nav ul.ft-nav-wrap > li {
        margin-bottom: 0;
		border-bottom: 1px solid #d9d9d9;
    }
    .ft-nav ul.ft-nav-wrap > li > a {
		display: block;
        font-size: 1.5rem;
        text-decoration: none;
		padding: 15px 0;
    }
    .ft-nav .ft-nav-inner {
		display: none;
    }
    
    /* ft-info
	-------------------------------------------------- */
    .ft-logo {
        width: 180px;
        margin: 0 auto 10px;
    }
    .ft-address {
        font-size: 1.2rem;
        margin-bottom: 25px;
        text-align: center;
    }
    .ft-contact a {
		width: 260px;
	    font-size: 1.3rem;
	    line-height: 53px;
        letter-spacing: 0.10em;
        margin: 0 auto;
    }
    .ft-sns {
        justify-content: center;
    }
    .ft-sns li {
        margin: 0 3px 0;
    }
    .ft-subnav {
        display: block;
        margin: 40px 0 30px;
        text-align: center;
    }
    .ft-subnav li {
        font-size: 1.2rem;
        margin-right: 0;
    }
    .ft-subnav li a {
        text-decoration: underline;
    }
	
	/* copyright
	-------------------------------------------------- */
	.copyright {
	    font-size: 1.0rem;
	    writing-mode: horizontal-tb;
	    line-height: 1;
	    position: static;
	    transform: none;
        text-align: center;
	}
	
	
    /*/////////////////////////////////////////////////////////////////////////////


              // common parts //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    
	/* ===============================================
        scroll
	=============================================== */
	.scroll {
	    font-size: 1.0rem;
	    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="83" viewBox="0 0 8 83"><path fill-rule="evenodd" fill="none" stroke="rgb(26, 26, 26)" d="M7.5,75.1l-7,6.7V0"/></svg>') no-repeat left top;
	    background-size: 7px auto;
	    left: inherit;
		right: 5.3333%;
		bottom: -30px;
	}
	.top .scroll {
	    left: inherit;
		right: 5.3333%;
	    bottom: inherit;
		top: 260px;
	}
	
	/* ===============================================
        title
	=============================================== */
	
	/* bg-object
	-------------------------------------------------- */
	.bg-object {
	    display: block;
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: calc(100% - 60px);
	    height: 0;
	    border-radius: 0 0 140px 0;
	}
	.top .bg-object {
	    height: calc(100vh + 120px);
	}
	.service .bg-object {
	    height: 0;
	}
	
	/* page-ttl
	-------------------------------------------------- */
	.page-ttl-inner {
	    padding-right: 5.3333%;
	    padding-left: 5.3333%;
	}
	.page-ttl .ttl {
	    font-size: 2.8rem;
	}
	.page-ttl .subttl {
	    padding-right: 55px;
	}
	.page-ttl .en-ttl-bg {
	    font-size: 5.8rem;
		font-weight: 700;
	    bottom: 10px;
	    right: 5px;
	}
	.page-ttl.sub .en-ttl-bg,
	.page-ttl-service .en-ttl-bg {
		bottom: -10px;
	}
	.page-ttl-img {
	    padding-right: 0;
	}
	.page-ttl-img .thumb {
	    height: 260px;
		border-radius: 0;
	}
	
	/* -- index -- */
	.page-ttl.index {
	    padding: 105px 0 0;
	}
	.page-ttl.index .page-ttl-inner {
	    padding-bottom: 25px;
		margin-bottom: 10px;
	}
	.page-ttl.index .ttl {
	    padding: 25px 0 25px;
	}
	.page-ttl.index .ttl::before {
		width: 30px;
	}
	.page-ttl.index .ttl._mB {
	    padding: 25px 0 40px;
	}
	.page-ttl.index .lead {
	    padding-bottom: 40px;
	}
	
	/* -- sub -- */
	.page-ttl.sub {
	    padding: 100px 0 0;
	}
	.page-ttl.sub .page-ttl-inner {
	    padding-bottom: 25px;
	}
	.page-ttl.sub .ttl {
	    padding: 10px 0 40px;
	}
	
	/* -- detail -- */
	.page-ttl.detail .page-ttl-inner {
	    padding-bottom: 45px;
	}
	
	/* page-ttl-bd
	-------------------------------------------------- */
	.page-ttl-bd {
	    padding-top: 20px;
	}
	.page-ttl-bd .en {
	    font-size: 1.0rem;
	    padding-left: 20px;
	}
	.serviceNav-btm .page-ttl-bd .en {
	    padding-left: 0;
	    padding-right: 20px;
	}
	
	/* page-ttl-service
	-------------------------------------------------- */
	.page-ttl-service-wrap {
		overflow: hidden;
	}
	.page-ttl-service {
	    padding: 100px 0 0;
	    display: block;
		overflow: hidden;
	}
	.page-ttl-service-inner {
	    width: 100%;
	    padding: 0 5.3333% 25px;
		position: relative;
		box-sizing: border-box;
	}
	.page-ttl-service-inner .ttl {
	    padding: 10px 0 40px;
	}
	.page-ttl-service-img {
	    width: 100%;
	}
	.page-ttl-service-img .thumb {
	    height: 260px;
		border-radius: 0;
	}
	
	/* detail-ttl
	-------------------------------------------------- */
	.detail-ttl-wrap {
	    margin-bottom: 40px;
	}
	.detail-ttl {
	    font-size: 2.2rem;
	    letter-spacing: 0.12em;
	    padding: 10px 0 20px;
	}
	
	/* breadcrumb
	-------------------------------------------------- */
	.breadcrumb li {
	    font-size: 1.1rem;
	}
	.page-ttl.sub .breadcrumb {
		justify-content: flex-start;
	}
	
	/* page-lead
	-------------------------------------------------- */
	.page-lead {
	    padding: 30px 0 25px;
	    margin-bottom: 40px;
	    line-height: 2;
	}
	.page-lead .lead {
	    font-size: 1.7rem;
	}
	
	/* sec-ttl
	-------------------------------------------------- */
	.sec-ttl {
	    margin-bottom: 10px;
	}
	.sec-ttl .ttl {
	    margin-bottom: 5px;
		font-size: 1.3rem;
	}
	.sec-ttl .en-ttl {
	    font-size: 2.6rem;
	}
	
	/* bd-ttl
	-------------------------------------------------- */
	.bd-ttl {
	    margin-bottom: 30px;
	}
	.bd-ttl .ttl {
	    font-size: 2.4rem;
	    padding-bottom: 20px;
	}
	.bd-ttl .ttl::after {
	    width: 50px;
	}
	.bd-ttl._left {
	    margin-bottom: 25px;
	}
	.bd-ttl .lead {
	    font-size: 1.6rem;
	    margin: 15px 0 0;
	    padding-bottom: 0;
	}
	.bd-ttl .txt {
	    margin: 20px 0 0;
	}
	
	
	/* ===============================================
        contents-col2
	=============================================== */
	.sp-contents-col1 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.contents-col2 {
	    display: block;
	}
	.contents-col2-main {
	    width: 100%;
	    box-sizing: border-box;
	    padding: 50px 6.6666% 60px;
	    border-left: none;
	}
	.contents-col2._reverse .contents-col2-main {
	    padding: 0 6.6666% 60px;
	    border-left: none;
	}
	
	/* contents-col2-anchor
	-------------------------------------------------- */
	.contents-col2-anchor {
	    margin: -5px -5px 30px;
	}
	
	/* col2-contents
	-------------------------------------------------- */
	.col2-contents {
	    margin-bottom: 60px;
	}
	.col2-contents::before {
	    width: 40px;
	}
	.col2-contents-inner {
	    margin-bottom: 50px;
	}
	.col2-contents:last-child,
	.col2-contents-inner:last-child {
	    margin-bottom: 0;
	}
	
	/* cont-ttl
	-------------------------------------------------- */
	.cont-ttl {
	    font-size: 2.4rem;
	    padding: 30px 0 25px;
	}
	.cont-ttl span {
	    font-size: 1.4rem;
	}
	.cont-subttl {
	    font-size: 1.5rem;
	    letter-spacing: 0.10em;
	    padding: 10px 18px 11px;
	    margin-bottom: 30px;
	}
	.cont-subttl._mB {
	    margin-bottom: 15px;
	}
	
	/* col2-contents-img
	-------------------------------------------------- */
	.col2-contents-img {
	    display: block;
	    justify-content: space-between;
	}
	.col2-contents-img .block {
	    width: 100%;
		margin-bottom: 25px;
	}
	.col2-contents-img .block p {
	    margin-bottom: 15px;
	}
	.col2-contents-img .block-img {
	    width: 100%;
	}
	.col2-contents-img dl {
	    margin-top: 10px;
	}
	.col2-contents-img dl dt {
	    font-size: 1.2rem;
	}
	.col2-contents-img dl dd {
	    font-size: 1.6rem;
	}
	
	/* col2-contents-2
	-------------------------------------------------- */
	.col2-contents-2 {
	    display: block;
	}
	.col2-contents-2._mB {
	    margin-bottom: 50px;
	}
	.col2-contents-2 .block {
	    width: 100%;
		margin-bottom: 20px;
	}
	.caption {
	    font-size: 1.2rem;
	    margin-top: 10px;
	}
	.col2-contents .lead {
	    margin-bottom: 25px;
	}
	.col2-contents-inner .lead {
	    margin-bottom: 35px;
	}
	
	/* col2-contents-3
	-------------------------------------------------- */
    .col2-contents-3::after {
        display: none;
    }
    .col2-contents-3 .block {
	    width: 47.5%;
	    margin-top: 25px;
	}
	.col2-contents-3 .block dl {
	    font-size: 1.2rem;
	    margin-top: 10px;
	}
	.col2-contents-3 .block dt {
	    font-size: 1.6rem;
	    margin-bottom: 3px;
	}
	
	/* block-contents
	-------------------------------------------------- */
	.block-contents {
		margin-bottom: 20px;
	}
	.block-contents._mB {
		margin-bottom: 50px;
	}
	
	/* block-ttl
	-------------------------------------------------- */
	.block-ttl {
	    font-size: 2.2rem;
	    line-height: 1.75;
	    letter-spacing: 0.12em;
	    padding: 30px 0;
	    position: relative;
	}
	.block-ttl::before {
	    content: "";
	    width: 60px;
	    height: 1px;
	    background: #1a1a1a;
	    position: absolute;
	    left: 0;
	    top: 0
	}
	.block-ttl span {
	    font-size: 1.4rem;
		letter-spacing: 0.04em;
	}
	.contents-col2-side .block-ttl {
	    font-size: 2.4rem;
	}
	
	/* block-col3-list
	-------------------------------------------------- */
	.block-col3-list {
	    display: flex;
	    justify-content: space-between;
	    flex-wrap: wrap;
	}
	.block-col3-list::after {
	    display: none;
	}
	.block-col3-list .item {
	    width: 47.5%;
	    margin-bottom: 30px;
	}
	.block-col3-list .item .thumb {
		border-radius: 4px;
	}
	.block-col3-list .item .ttl {
	    font-size: 1.5rem;
	    font-weight: 500;
	    line-height: 1.75;
	    padding: 10px 0 5px;
	}
	.block-col3-list .item .txt {
	    font-size: 1.1rem;
		line-height: 1.75;
	}
	.block-col3-list .item .btn-txt {
	    margin-top: 10px;
	}
	
	/* contents-col2-side
	-------------------------------------------------- */
	.contents-col2-side {
	    width: 100%;
	    position: static;
	    padding: 50px 6.6666% 60px;
		border-top: 1px solid #d9d9d9;
		box-sizing: border-box;
	}
	.contents-col2._reverse .contents-col2-side {
	    padding: 0 6.6666%;
		border-top: none;
	}
	
	/* contents-side-ttl
	-------------------------------------------------- */
	.contents-side-ttl {
	    margin-bottom: 10px;
	}
	.contents-side-ttl .ttl {
	    font-size: 2.0rem;
	    padding-bottom: 15px;
	    margin-bottom: 10px;
	}
	
	/* contents-side-nav
	-------------------------------------------------- */
	.contents-side-nav {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.contents-side-nav li {
		width: 47.5%;
		border-bottom: 1px solid #d9d9d9;
	}
	.contents-side-nav li a {
	    font-size: 1.3rem;
	    padding: 17px 0 15px;
	    margin: 0;
	}
	.contents-side-nav li a .en {
	    width: 25px;
	    font-size: 1.0rem;
	    padding-top: 5px;
	}
	.contents-side-nav li a .ja {
	    width: calc(100% - 25px);
	}
	.contents-side-nav li.ac a {
	    padding: 17px 0 15px;
		margin: 0;
	}
	.contents-side-nav li.ac a::before {
	    width: 100%;
	    height: 1px;
	    background: #1a1a1a;
	    position: absolute;
	    left: 0;
	    top: inherit;
		bottom: -1px;
	}
	
	
	/* ===============================================
        btn
	=============================================== */
	
	/* btn
	-------------------------------------------------- */
	.btn a,
	.btn span {
	    width: 220px;
	    font-size: 1.4rem;
	    line-height: 47px;
	    padding: 0 20px;
	}
	.btn.sort a,
	.btn.sort span {
	    width: 240px;
	}
	.btn.small a {
	    width: 150px;
	    font-size: 1.3rem;
	    line-height: 36px;
	}
	.btn-list {
	    display: block;
	    margin-top: 20px;
	}
	.btn-list .btn {
	    margin: 10px 0 0 0;
        text-align: center;
	}
	.btn-list .btn a {
	    width: 90%;
	    padding: 0 15px;
	}
    
	/* btn-txt
	-------------------------------------------------- */
	.btn-txt span,
	.btn-txt a {
	    font-size: 1.2rem;
	    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="36" height="8" viewBox="0 0 36 8"><path fill-rule="evenodd" fill="none" stroke="rgb(26, 26, 26)" d="M28,0.3l6.8,7.2H0"/></svg>') no-repeat right top 10px;
	    background-size: 24px auto;
	    padding-right: 35px;
	}
	.btn-txt.ja a {
	    font-size: 1.2rem;
	}
	.btn-txt.ja span {
	    font-size: 1.2rem;
	}

	/* ===============================================
        anchor-link
	=============================================== */
	.anchor-link li {
	    margin: 0 17px 10px 0;
	}
	.anchor-link li:last-child {
		margin-right: 0;
	}
	.anchor-sidelink {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: 30px;
	}
	.anchor-sidelink li {
		width: 47.5%;
	    margin: 0 0 10px 0;
	}
	.anchor-link-item a {
	    padding: 0 0 0 28px;
	}
	.anchor-link-item a::before {
	    width: 21px;
	    height: 21px;
	    top: 3px;
	    background-size: 7px auto;
	}
	
	
	/* ===============================================
        table
	=============================================== */
	
	/* table01
	-------------------------------------------------- */
	dl.table01 {
	    width: 100%;
	    display: flex;
	    flex-wrap: wrap;
		font-size: 1.3rem;
	}
	dl.table01 dt {
		width: 20%;
	    padding: 20px 10px 20px 0;
	}
	dl.table01 dd {
		width: 80%;
	    padding: 15px 0;
	}
	dl.table01 dd .inner {
	    padding: 5px 0 5px 20px;
		word-break: break-all;
	}
	
	/* table02
	-------------------------------------------------- */
	dl.table02 {
		font-size: 1.3rem;
	}
	dl.table02 dt {
	    width: 50%;
	    padding: 20px 10px 20px 0;
	}
	dl.table02 dd {
	    width: 50%;
	    padding: 15px 0;
	}
	dl.table02 dd .inner {
	    padding: 5px 0 5px 20px;
		word-break: break-all;
	}
	
	/* table03
	-------------------------------------------------- */
	dl.table03 {
		font-size: 1.3rem;
	}
	dl.table03 dt {
	    width: 90px;
	    padding: 25px 0;
	}
	dl.table03 dt::after {
	    width: 15px;
	    top: 50%;
	}
	dl.table03 dd {
	    width: calc(100% - 90px);
	    padding: 25px 0 10px 20px;
		word-break: break-all;
	}
	dl.table03 dd p {
	    margin-bottom: 15px;
	}
	
	
    /*/////////////////////////////////////////////////////////////////////////////


              // Slider //
	  

	/////////////////////////////////////////////////////////////////////////////*/
	/* Arrows */
	.slick-prev, .slick-next {
	    top: 110px;
	    width: 40px;
	    height: 40px;
	}
	.slick-prev {
	    left: -15px;
	}
	.slick-next {
	    right: 10px;
	}
	
	/* Dots */
	.visual .slick-dots {
	    top: -75px;
	    left: 46.5%;
	    z-index: 2;
	    margin-top: 0;
	}
	
}