/*
Theme Name: insieme
Theme URI:
Template: lightning
Description:
Author: KUMAKI KAORI
Tags:
Version: 0.5.2
*/

@charset "UTF-8";

/* 共通部分 */
html {
    font-size: 62.5%;
    margin: 0px auto;
}

body {
    font-family: Helvetica Neue LT, 游ゴシック体, "Yu Gothic", YuGothic,
    "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo,
    Osaka, "ＭＳ Ｐゴシック", "MS PGothic", serif;
    font-size: 12px;
    line-height: 1.6em;
    margin: 0 auto;
    height: auto;
    background: #192734;
    color: #56585d;
    animation: fadeInmain 2s ease 0s 1 normal;
    -webkit-animation: fadeInmain 2s ease 0s 1 normal;

}

#body-inside{
    overflow-x: hidden;
    background: #192734;
}

#body-blog {
    overflow-x: hidden;
    background: #fff !important;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

a{
    color: #999;
    text-decoration: none !important;
}

a img.mouselink{
    background:none!important;
}

a:hover{
    color: #000;
    text-decoration: none;
}

.more a {
    color: #BDB089;
}

a:hover img {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
}

img {
    width:100%;
    max-width: 100%;
    height: auto;
}

video {
    max-width: 100%;
}

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}

li {
    list-style:none;
}

p {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

/*PCの場合*/
.sp	{ display:none !important;; }
@media screen and (max-width: 768px) {
    /*タブレット、スマホの場合*/
    .pc { display: none; }
    .sp { display:block !important;; }
}

#wrapper{
    max-width: 1400px !important;
    margin: 0 auto;
    padding-top: 80px;
}

@media (max-width:768px) {
    #wrapper{
        max-width: 100% !important;
        margin-top: -60px;
    }
}

.blog_wrap{
    max-width: 1400px !important;
    margin: 0 auto;
    padding-top: 200px;
}

@media (max-width:768px) {
    #wrapper{
        max-width: 100% !important;
        margin-top: -60px;
    }
}

#orverwidth {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-left: 50px;
}

#orverwidth_c {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}

#orverwidth-w {
    margin:0 -200%;
    padding:0 200%;
    background-color: #fff;
    color: #000;
    padding-top: 80px;
}

#orverwidth-b {
    margin:0 -200%;
    padding:0 200%;
    background-color: #D3D3D3;
    color: #fff;
    padding-top: 80px;
    padding-bottom: 30px;
    margin-bottom: 100px;
}

.orverwidth-img {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    margin-top: -40px;
}

.orverwidth-img img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width:768px) {
    #orverwidth-w {
        padding-top: 50px;
    }

    #orverwidth-b {
        padding-top: 50px;
        padding-bottom: 30px;
    }
    .orverwidth-img {
        margin-top: -10px;
    }
}

#orverwidth-line {
    margin:0 -200%;
    padding:0 200%;
    border-top: 1px solid #000;
}

#orverwidth-line-2 {
    margin:0 -200%;
    padding:0 200%;
    border-top: 1px solid #fff;
    margin-top: 0px;
}

/* TEXT */

.title {
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 35px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    text-align: left;
}

.title-2 {
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 35px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    text-align: center;
}

.sub-title{
    font-size: 18px;
    font-family: 'Yu Mincho', YuMincho ,serif;
    color: #fff;
    letter-spacing: 0.1em;
    margin-bottom: 70px;
    text-align: center;
}

.txt-title{
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: min(max(16px, calc(1rem + ((1vw - 4.8px) * 1.7308))), 25px);
    min-height: 0vw;
    letter-spacing: 0;
    margin-bottom: 20px;
    white-space: nowrap;
}

.txt{
    font-family: 'Yu Mincho', YuMincho ,serif;
    letter-spacing: 0.1em;
    line-height: 2em;
}

@media (max-width:768px) {
    .title {
        font-size: 25px;
        margin-left: -35px;
        margin-bottom: 10px;
    }
    .sub-title{
        font-size: 16px;
        margin-top: -15px;
        margin-bottom: 40px;
    }
}

/* MORE */

.more {
    font-size: min(max(13px, calc(0.8125rem + ((1vw - 4.8px) * 0.3846))), 15px);
    min-height: 0vw;
    font-family: 'Crimson Text', serif;
    font-weight: 200;
    letter-spacing: 3px;
    width: 50%;
    margin: 0 auto;
    text-align: center;
    color: #BDB089;
    border: 1px solid #BDB089;
    padding: 10px;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all 1s;
    margin-top: 40px;
}

.more:hover {
    background-color: #BDB089;
    color: #fff;
}

.more a {
    color: #BDB089;
}

.more a:hover {
    color: #000;
    text-decoration: none;
}

.more-2 {
    margin: 0 auto;
    width: 30%;
    font-size: 18px;
    font-family: 'Yu Mincho', YuMincho ,serif;
    color: #000;
    letter-spacing: 3px;
    text-align: center;
    background-color: #C1C1C1;
    border: 1px solid #C1C1C1;
    padding: 20px;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all 1s;
}

.more-2:hover {
    background-color: #C1C1C1;
    background-color: #fff;
    color: #000;
}

.more-2 a {
    color: #BDB089;
}

.more-2 a:hover {
    color: #000;
    text-decoration: none;
}

@media (max-width:768px) {
    .more-2 {
        width: 40%;
    }
}

.bl_more_area {
    margin: 0 auto;
    position: relative;
    font-family: 'Yu Mincho', YuMincho ,serif;
    margin: -620px 0 150px 0;
    z-index: 77777;
}
.bl_more_area_works {
    margin: 0 auto 150px;
    position: relative;
    font-family: 'Yu Mincho', YuMincho ,serif;
    z-index: 77777;
}

.bl_more {
    margin: 0 auto;
    width: 400px;
    height: 50px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    position: relative;
    border: 1px solid #fff !important;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all 1s;
}

.bl_more:hover {
    background-color: #ccc;
    color: #000;
}

.bl_more a {
    color: #000;
}

.bl_more a:hover {
    background-color: #84AD89;
    color: #fff;
    text-decoration: none;
}

.bl_more_c1 {
    font-size: 13px;
    letter-spacing: 0.2em;
}

.bl_more_c2 {
    position: absolute;
    right:10px;/*-- 右端からの距離（任意） --*/
    font-size: 20px;
}

@media (max-width:768px) {
    .bl_more_area {
        margin: -530px 0 100px 0;
    }
    .bl_more {
        width: 80%;
    }
}

/* PC header */
#header{
    position: fixed;/*fixedを設定して固定*/
    height: 70px;/*高さ指定*/
    width:100%;/*横幅指定*/
    z-index: 9999999;/*最前面へ*/
    /*以下はレイアウトのためのCSS*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    font-family: 'Yu Mincho', YuMincho ,serif;
    padding: 0 !important;
    margin: 0 !important;
}

#header .logo {
    width:280px;
    text-align: left;
    padding-left: 30px;
	margin: 0;
}

@media screen and (max-width:1280px){
    #header .logo {
        width:210px;
        padding-left: 0px;
        margin-top: 20px;
        margin-left: 20px;
    }
}


/*　上に上がる動き　*/

#header.UpMove{
    position: fixed;
    width:100%;
    animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-100px);
    }
}

/*　下に下がる動き　*/

#header.DownMove{
    position: fixed;
    width:100%;
    animation: DownAnime 0.5s forwards;
    background: #1C2A39;
}
@keyframes DownAnime{
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width:1280px) {
    #header,
    #header.UpMove,
    #header.DownMove{
        animation:none;
        height: auto;
        padding: 0;
        display: block;
        top: 0;
    }

    #header.DownMove{
        height: 60px;
    }
}

/*=== ナビゲーションドロップダウン ===*/

/*ナビゲーションを横並びに*/
nav ul{
    list-style: none;
    display: flex;
    justify-content: center;
}
/*2階層目以降は横並びにしない*/
nav ul ul{
    display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li{
    position: relative;
}

/*ナビゲーションのリンク設定*/
nav ul li a{
    display: block;
    text-decoration: none;
    color: #eee;
    padding:20px 20px;
    transition:all .3s;
}

nav ul li li a{
    padding:10px 35px;
}

@media screen and (max-width:1200px) {
    nav ul li a{
        padding:20px;
    }
    nav ul li li a{
        padding:10px 20px;
    }
}

nav ul li a:hover{
    color:#fff;
}

/*==矢印の設定*/

/*2階層目を持つliの矢印の設定*/
nav ul li.has-child::before{
    content:'';
    position: absolute;
    left:15px;
    top:30px;
    width:6px;
    height:6px;
    border-top: 2px solid #eee;
    border-right:2px solid #eee;
    transform: rotate(135deg);
}

@media screen and (max-width:1200px) {
    nav ul li.has-child::before{
        left:0;
    }
}

/*== 2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
nav li.has-child ul{
    /*絶対配置で位置を指定*/
    position: absolute;
    left:0;
    top:62px;
    z-index: 4;
    /*形状を指定*/
    background:rgba(255,255,255,0.2);
    width:180px;
    /*はじめは非表示*/
    visibility: hidden;
    opacity: 0;
    /*アニメーション設定*/
    transition: all .3s;
}

/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
    visibility: visible;
    opacity: 1;
}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a{
    color: #fff;
    border-bottom:solid 1px rgba(255,255,255,0.4);
}

nav li.has-child ul li:last-child a{
    border-bottom:none;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active{
    background:rgba(255,255,255,0.2);
}

@media screen and (max-width:1280px){
    nav{
        padding: 0;
    }

    nav ul{
        display: block;
    }

    nav ul li a{
        border-bottom:1px solid #ccc;
    }

    /*矢印の位置と向き*/

    nav ul li.has-child::before{
        left:20px;
    }

    nav ul ul li.has-child::before{
        transform: rotate(135deg);
        left:20px;
    }

    nav ul li.has-child.active::before{
        transform: rotate(-45deg);
    }

}


#g-nav {
    position: absolute;
    right:10px;
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.2em;
}

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

    /*アクティブクラスがついたら位置を0に*/
    #g-nav.panelactive{
        top: 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 {
        /*ナビゲーション天地中央揃え*/
        width: 90%;
        margin:100px auto 0 auto;
    }

    #g-nav ul ul{
        width: 100%;
        margin: 0;
    }

    /*プルダウンナビのCSS*/
    #g-nav ul li.has-child ul{
        position: relative;
        left:0;
        top:0;
        width:100%;
        visibility:visible;/*JSで制御するため一旦表示*/
        opacity:1;/*JSで制御するため一旦表示*/
        display: none;/*JSのslidetoggleで表示させるため非表示に*/
        transition:none;/*JSで制御するためCSSのアニメーションを切る*/
        transform: none;
    }

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

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

    #g-nav li a{
        color: #fff;
        text-decoration: none;
        padding:10px;
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: bold;
    }
}


.g-nav-openbtn{
    display: none;
}

@media screen and (max-width:1280px) {
    .g-nav-openbtn{
        display: block;
        position:fixed;
        z-index: 9999;/*ボタンを最前面に*/
        top:5px;
        right: 10px;
        cursor: pointer;
        width: 50px;
        height:50px;
    }

    /*ボタン内側*/

    .g-nav-openbtn .openbtn-area{
        transition: all .4s;
    }

    .g-nav-openbtn span{
        display: inline-block;
        transition: all .4s;/*アニメーションの設定*/
        position: absolute;
        left: 14px;
        height: 3px;
        border-radius: 2px;
        background: #fff;
        width: 45%;
    }


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

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

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

    /*activeクラスが付与されると
    線と周りのエリアが回転して×になる*/

    .g-nav-openbtn.active .openbtn-area{
        transform: rotateY(-360deg);
    }

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

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

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


.nav01c li a{
    /*線の基点とするためrelativeを指定*/
    position: relative;
	letter-spacing: 0.15em;
}

.nav01c li.current a,
.nav01c li a:hover{
    color:#fff;
}

.nav01c li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 16px;
    left: 25%;
    /*線の形状*/
    width: 50%;
    height: 1px;
    background:#eee;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: left top;/*左上基点*/
}

.nav01c li li a::after {
    display: none;
}

/*現在地とhoverの設定*/
.nav01c li.current a::after,
.nav01c li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}
@media screen and (max-width:1280px) {
    .nav01c li a::after {
        display: none;
    }
}

/* main img */

#img_slider {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

.slide_txt {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0 0 80px 80px;
    color: #fff;
    text-align: left;
}

.slide-txt {
    font-size: 40px;
    line-height: 1.2em;
    letter-spacing: 0;
	font-family: 'Yu Mincho', YuMincho ,serif;
	font-weight: 700;
}

.slide-sub_txt {
    font-size: 20px;
	font-family: 'Yu Mincho', YuMincho ,serif;
}

.slide_c_txt {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    font-family: 'Times New Roman', serif;
    color: #fff;
    text-align: center;

}

.slide_c-txt {
    font-size: 15px;
    letter-spacing: 0.2em;
    transform:rotate(90deg);
    margin-right: -90px;
}

@media (max-width:768px) {
    .slide_txt {
        margin: 0 0 20px 20px;
    }
    .slide-txt {
        font-size: 20px;
        line-height: 1.3em;
        white-space: nowrap;
    }
    .slide-sub_txt {
        font-size: 15px;
    }
    .slide_c-txt {
        font-size: 13px;
        margin-right: -95px;
    }
}

/* menu */

.menu-box {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
}

.menu-box img {
    margin: 0 !important;
    padding: 0 !important;
}

.menu-box li {
    width: calc(33.33333% - 0px);
    position: relative;
    padding: 0;
}

.menu-box li img {
    max-width:100%; /*画像のはみだしを防ぐ*/
    height: 400px; /*画像の縦横比を維持 */
}

.menu-box_2 {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    margin-bottom: 50px;
}

.menu-box_2 li {
    width: calc(50% - 0px);
    position: relative;
    padding: 0;
    margin: 0;
}

.menu-box_2 li img {
    max-width:100%; /*画像のはみだしを防ぐ*/
    height: 400px; /*画像の縦横比を維持 */
}


.image_link{
    display:block;
    position:relative;
}
.image_link img{
    display:block;
    width:100%;
	object-fit: cover;
	object-position: center;
}
.image_link:before{
    content:"";
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    z-index:2;
    background:#000;/*好みの色に変えてください。*/
    opacity:0;
    transition:0.3s;
}
.image_link:after{
    content:"";
    display:block;
    width:0;
    height:8px;
    position:absolute;
    bottom:0;
    left:0;
    z-index:3;
    transition:0.3s;
    background:#122d66;/*好みの色に変えてください。*/
}
.image_link:hover:before{
    opacity:0.5;
}
.image_link:hover:after{
    width:100%;
}
.menu_trans {
    position: relative;
    width: 100%;
    height: 300px;
    margin: 0 auto;
    display: block;
    overflow: hidden;
    cursor: pointer;
}
.menu_trans img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    display: block;
    -webkit-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
}
.menu_trans img:nth-of-type(2) {
    left: 200%;
}
.menu_trans:hover img:nth-of-type(2) {
    left: 50%;
}
.menu_txt p {
    color: #fff;
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 18px;
    font-weight: bold;
    left: 50%;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}
.menu_txt p.menu_subtxt {
    font-size: 0.9em;
    top: 56%;
}
@media screen and (max-width: 460px) {
    .menu-box li img {
        height: 120px; /*画像の縦横比を維持 */
    }
    .menu-box_2 li img {
        height: 120px; /*画像の縦横比を維持 */
    }
    .menu-box a:hover img {
        opacity: 1;
        filter: alpha(opacity=70);
        -ms-filter: "alpha(opacity=70)";
    }

    .menu-box_2 a:hover img {
        opacity: 1;
        filter: alpha(opacity=70);
        -ms-filter: "alpha(opacity=70)";
    }
    .menu_trans {
        position: relative;
        width: 100%;
        height: 200px;
        margin: 0 auto;
        display: block;
        overflow: hidden;
        cursor: pointer;
    }
    .menu_trans img {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 100%;
        display: block;
        -webkit-transition: .4s ease-in-out;
        transition: .4s ease-in-out;
    }
    .menu_trans img:nth-of-type(2) {
        left: 200%;
    }
    .menu_trans:hover img:nth-of-type(2) {
        left: 50%;
    }
    .menu_txt p {
        font-size: 15px;
    }
    .menu_txt p.menu_subtxt {
        display: none;
    }
}


/* service */

.service-area {
    margin-bottom: 200px;
}

@media screen and (max-width: 460px) {
    .service-area {
        margin-bottom: 250px;
    }
}

/* ---画像左配置--- */
.service_box-l {
    width: 100%;
    position: relative;
    margin-bottom: 80px;
}

.service-pict-l {
    position:relative;
    width: 70%;
    clip-path: polygon(0% 0%, 0% 200%, 90% 0%);
}

.service-pict-l img {
    width: 100%;
    position: absolute;
    right: 0;
}

.service-text_area-l {
    position: absolute;
    width: 80%;
    top: 30%;
    right: -10%;
}

.service_title-l {
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0;
    line-height: 2em;
    text-align: center;
    margin-top: 10px;
}

.service_sub_title-l {
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 15px;
    color: #fff;
    letter-spacing: 0.1em;
    line-height: 2em;
    text-align: center;
    margin-bottom: 25px;
}

@media screen and (max-width: 460px) {
	.service-pict-l {
		position: relative;
		width: 100%;
		clip-path: polygon(0 0, 100% 0, 100% 50%, 0% 100%);
	}
    .service-text_area-l {
        width: 96%;
        top: 85%;
        right: 2%;
    }
    .service_title-l {
        font-size: 18px;
        letter-spacing: 0;
        line-height: 1em;
        text-align: right;
        margin-top: 0;
        margin-bottom: 10px;
    }
    .service_sub_title-l {
        font-family: 'Yu Mincho', YuMincho ,serif;
        font-size: 14px;
        letter-spacing: 0;
        color: #fff;
        line-height: 1.5em;
        text-align: right;
        margin-bottom: 15px;
    }
}

/* ---画像右配置--- */
.service_box-r {
    width: 100%;
    position: relative;
    margin-bottom: 550px;
}

.service-pict-r {
    position: absolute;
    width: 70%;
    clip-path: polygon(15% 0%, 100% 180%, 100% 0%);
    right: 0;
}

.service-text_area-r {
    position: absolute;
    width: 80%;
    left: -10%;
    padding-top: 9%;
}

.service_title-r {
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0;
    line-height: 2em;
    text-align: center;
    margin-top: 10px;
}

.service_sub_title-r {
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 14px;
    letter-spacing: 0;
    color: #fff;
    line-height: 2em;
    text-align: center;
    margin-bottom: 25px;
}

@media screen and (max-width: 460px) {
	.service-pict-r {
		position: absolute;
		width: 100%;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%);
	}
    .service_box-r {
        padding-top:130px;
        margin-bottom: 470px;
    }
    .service-text_area-r {
        width: 96%;
        top: 200px;
        left: 3%;
        padding-top: 20%;
    }
    .service_title-r {
        font-size: 18px;
        letter-spacing: 0;
        line-height: 1em;
        text-align: left;
        margin-top: 0;
        margin-bottom: 10px;
    }
    .service_sub_title-r {
        font-size: 15px;
        line-height: 1.5em;
        text-align: left;
        margin-bottom: 15px;
    }
}

.service_txt {
    margin: 0 auto;
    width: 60%;
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 13px;
    color: #fff;
    letter-spacing: 0.1em;
    line-height: 2.5;
    padding: 5px;
}

#service_more {
    overflow: hidden;
    margin: 0 auto;
    width: 20%;
    text-align: center;
    margin-top: 40px;
}

.service-more {
    height:30px;
    float: left;
    font-size: 20px;
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-weight: 200;
    color: #fff;
    letter-spacing: 3px;
    line-height:30px;
    text-align: center;
    padding-left: 10px;
}

.service-more:hover {
    color: #999;
}

.service-more a {
    color: #fff;
}

.service-more a:hover {
    color: #999;
    text-decoration: none;
}

.service-maru {
    float: left;
    height:30px;
    width:30px;
    border-radius:50%;
    line-height:30px;
    text-align:center;
    background: #fff;
}

.maru span {
    font-weight: bold;
}

@media (max-width:768px) {
    .service_txt {
        width: 100%;
        font-size: 11px;
        line-height: 2;
    }
    #service_more {
        width: 100px;
        margin-top: 20px;
    }
    .service_more {
        width: 40%;
    }

}

.mask-box {
    width: 100%;
    height: 380px;
    overflow: hidden;
}

.mask-box .mask-boxInner {
    width: inherit;
    height: inherit;
    line-height: 200px;
    font-size: 1.5em;
    text-align: center;
    color: #555;
    opacity: 0;
    background-size: 100%;
}

@media (max-width:768px) {
    .mask-box .mask-boxInner {
        background-size: cover;
    }
}
@media (max-width:460px) {
    .mask-box {
		width: 100%;
		height: 200px;
		overflow: hidden;
	}
}

.isPlay {
    animation-name: play;
    animation-duration: .7s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.8,0,.5,1);
    position: relative;
    opacity: 1 !important;
}

.isPlay:before {
    animation-name: maskOut;
    animation-duration: .7s;
    animation-delay: .7s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.8,0,.5,1);
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: linear-gradient( 109.6deg,  rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );
}

@keyframes play {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes maskOut {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

#orverwidth-works-bg {
    max-width: 1400px;
    margin: 0 auto;
}

/* blog */

#orverwidth-blog-bg {
    background-image: url(https://www.insieme-detailing.jp/wp-content/themes/insieme/img/blog_bg.jpg);
    background-size: 50%;
    background-position: top right;
    background-repeat : no-repeat;
    color: #000;
    margin-top: -40px;
    padding-bottom: 80px;
    margin-bottom: 160px;
}

.blog_area {
    padding-top: -50px !important;
}

.blog-box {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    padding-top: 50px;
    margin-bottom: 40px;
}

.blog-box li {
    width: calc(33.33333% - 10px);
    position: relative;
    padding: 0;
}

.blog-box li img {
    max-width:90%; /*画像のはみだしを防ぐ*/
    height: auto; /*画像の縦横比を維持 */
}

@media screen and (max-width: 900px) {
    .blog-box {
        width: 90%;
        margin-bottom: 10px;
    }
    .blog-box li {
        width: calc(100% - 5px);
    }
}

.blog-box .date {
    font-size: 15px;
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.1em;
    margin: 10px 0;
}

.blog-box .title {
    font-size: 18px;
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.1em;
}

#pcp_wrapper-65, #pcp_wrapper-1392 {
    margin: 0 auto;
    width: 90%;
}

.sp-pcp-title {
    font-size: 18px;
    font-family: 'Yu Mincho', YuMincho ,serif;
    color: #fff;
    margin:10px 0;
}

.sp-pcp-title a {
    color: #fff;
}

.swiper-slide {
    font-size: 15px;
    font-family: 'Yu Mincho', YuMincho ,serif;
    color: #fff;
    width: 100%;
    height: 100%;
    text-align: left;
}

/* news */

#orverwidth-news-bg {
    margin:0 -200%;
    padding:0 200%;
    background-image: url(https://www.insieme-detailing.jp/wp-content/themes/insieme/img/bg_1.png);
    background-size: cover;
    background-position:100%;
    position: relative;
    box-sizing: border-box;
    padding-bottom: 80px;
    z-index: 1;
}

#orverwidth-news-bg::after {
    content: '';
    background-color: rgba(0,0,0,.5);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
}

#news_area {
    margin:0 -200%;
    padding:0 200%;
    position: relative;
    margin: 0 auto;
    width: 80%;
    height: auto;
    padding-bottom: 450px;
    margin-top: 100px;
}

.news_block-1 {
    width: 40%;
    position: absolute;
    top: 45%;
    left: 2%;
    z-index: 99999;
}

.news_block-2 {
    position: absolute;
    width: 60%;
    top: 18%;
    right: 30%;
    z-index: 99999;
}

.news ul {
    border-right: 2px solid #004986;
}

.news li{
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 15px;
    color: #fff;
    letter-spacing: 0.1em;
    line-height: 2em;
    margin-bottom: 10px;
    text-align: left;
}

.news_img_sp img {
    margin-top: 0px;
    margin-bottom: 30px;
}

.news .date {
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
}

.news .txt {
    line-height: 2em;
}

#news_area .title {
	margin-left: 0;
}

@media screen and (max-width: 768px) {
    #orverwidth-news-bg {
        margin:0;
        padding:0;
        width: 100%;
    }
    #news_area {
        margin:0;
        padding:0;
        width: 100%;
        padding-bottom: 450px;
        margin-top: 20px;
    }
    .news_block-1 {
        width: 100%;
        top: 8%;
        left: 4%;
    }

    .news_block-2 {
        width: 93%;
        top: 50%;
        left: 46%;
        right: 0;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }

    .news {
        margin-bottom: 80px;
    }
    .news li{
        margin: 0 auto;
        width: 90%;
    }
    .news .date {
        font-size: 13px;
    }
    .news-content {
        font-size: 13px;
    }
	#news_area .title {
		margin-left: 0;
	}
}

.news-border {
    position: relative;
    text-align: right;
    font-size: 18px;
}

.news-border :before{
    content: '';
    position: absolute;
    left: 100%;
    bottom: 0;
    width: 0;
    transform: translateX(-100%);
    border-bottom: solid 1px #fff;
    animation: border_anim 2s linear forwards;
}

.news-border_2 {
    position: relative;
    text-align: right;
    font-size: 18px;
}

.news-border_2 :before{
    content: '';
    position: absolute;
    left: 100%;
    bottom: 0;
    width: 0;
    transform: translateY(50%);
    border-right: solid 3px #004986;
    animation: border_anim 3s linear forwards;
}

@keyframes border_anim {
    0%{
        width: 0%;
    }
    100%{
        width: 100%;
    }
}


.news_box {
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 2px 30px rgba(black, .2);
    background: lighten(#f0f4c3, 10%);
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    z-index: 99999;
}

.wave {
    opacity: .4;
    position: absolute;
    top: 33%;
    left:-30%;
    background: #00479d;
    width: 100%;
    height: 1100px;
    margin-left: -250px;
    margin-top: -250px;
    transform-origin: 48% 50%;
    border-radius: 43%;
    animation: drift 5000ms infinite linear;
}

.wave.-three {
    animation: drift 7000ms infinite linear;
}

.wave.-two {
    animation: drift 9000ms infinite linear;
    opacity: .1;
    background: #9c9c9c;
}

.box:after {
    content: '';
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(#e8a, 1), rgba(#def, 0) 80%, rgba(white, .5));
    z-index: 11;
    transform: translate3d(0, 0, 0);
}

@keyframes drift {
    from { transform: rotate(0deg); }
    from { transform: rotate(360deg); }
}

@media screen and (max-width: 768px) {
    .wave {
        top: 25%;
        left:50%;
        width: 100%;
        height: 500px;
    }
}

/* access */

.ac_box {
    width: 100%;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 40px;
    align-items: center;
}

.ac_txt_area {
    margin-bottom: 10px;
}

.ac_text {
    width: 50%;
}

.ac_pict {
    width: 50%;
    margin-left: 3%;
}

.ac_pict img {
    width: 100%;
    height:auto;
}

.ac_box:nth-child(odd) {
    flex-direction: row-reverse;
}
.ac_box:nth-child(odd) .text {
    text-align: right;
}
.ac_box:nth-child(odd) .pict {
    margin-left: 0;
    margin-right: 3%;
}

@media (max-width:768px) {
    .ac_box {
        flex-direction: column-reverse;
        margin-top: -50px;
    }
    .ac_box:nth-child(odd) {
        flex-direction: column-reverse;
    }
    .ac_text {
        text-align: center;
    }
    .ac_box:nth-child(odd) .text {
        text-align: center;
    }
    .ac_pict {
        width: 100%;
        margin-left: 0;
        text-align: center;
        margin-bottom: 30px;
    }
    .ac_text iframe {
        margin: 0 auto;
        width:100% !important;
    }
    .ac_box:nth-child(odd) .pict {
        margin-left: 0;
        margin-right: 0%;
    }
    .ac_text {
        margin: 0 auto;
        width: 80%;
    }
}

.ac_icon {
    width: 40px;
    height: 40px;
    vertical-align: middle;
    margin-right: 10px;
}

.ac_txt {
    vertical-align: middle;
    display: inline-block;
    font-size: 18px;
    font-family: 'Yu Mincho', YuMincho ,serif;
}

.ac_txt-2 {
    font-size: 18px;
    font-family: 'Yu Mincho', YuMincho ,serif;
    text-align: left;
    margin-bottom: 30px;
}

@media (max-width:768px) {
    .ac_txt_area {
        text-align: left;
        margin-bottom: 10px;
    }
    .ac_txt {
        text-align: left;
    }
}

.shop_img {
    margin: 0 auto;
    width: 90%;
    text-align: left;
}

.shop_img img {
    margin: 0 auto;
    width: 100%;
    text-align: left;
}

.shop_txt {
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 16px;
    color: #000;
    letter-spacing: 0.1em;
    line-height: 2em;
    padding: 10px 0 20px 20px;
}

.r-line {
    border-right: 1px solid #000;
    margin-right: 20px;
}

@media (max-width:768px) {
    .shop_img {
        width: 100%;
        text-align: center;
        padding-top: 10px;
    }
    .shop_txt {
        font-size: 15px;
        padding: 10px;
    }
    .r-line {
        border-right: 0px solid #000;
        margin-right: 0px;
    }
}

/* CONTACT */
#orverwidth-contact-bg {
    margin:0 -200%;
    padding:0 200%;
}

.contact_area {
    position: relative;
    margin: 0 auto;
    width: 100%;
    margin-bottom: 200px;
    z-index: 888888;
    padding-top: 100px;
}

.contact_line {
    margin: 0 auto;
    width: 20%;
}

.contact_bg {
    position: relative;
    z-index: 77777;
}

.contact_bg p {
    position: absolute;
    top:-20px;
    left: 20%;
    z-index: 88888;
}

.contact_bg_img{
    width: 120%;
    position: absolute;
    top: -290px;
    right: -5%;
    z-index: 1;
}


.contact_box {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    margin-bottom: 50px;
    align-items: center;
}

.contact_box li {
    width: calc(50% - 5px);
    position: relative;
    padding: 0;
    margin-bottom: 20px;
}

.contact_box li img {
    max-width:100%; /*画像のはみだしを防ぐ*/
    height: auto; /*画像の縦横比を維持 */
}

.shop_txt-2 {
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 13px;
    color: #fff;
    letter-spacing: 0.1em;
    line-height: 2em;
    text-align: center;
    margin-top: 10px;
}

.shop_txt-3 {
    margin: 0 auto;
    width: 35%;
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 15px;
    color: #fff;
    background-color: #1FC32E;
    padding: 10px;
    letter-spacing: 0.1em;
    line-height: 2em;
    text-align: center;
    border-radius: 10px;
}

.shop_id {
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 18px;
    color: #fff;
    letter-spacing: 0.1em;
    line-height: 2em;
    text-align: center;
}

@media (max-width:768px) {
    .contact_area {
        padding-top: 50px;
    }
    .contact_box {
        width: 90%;
        margin-top: 0;
        margin-bottom: 450px;
    }
    .contact_box li {
        width: calc(100% - 5px);
    }
    .contact_bg p {
        top:-20px;
        left: 10%;
    }
    .contact_bg_img{
        height: 200px !important;
        top: -50px;
        right: -5%;
        z-index: 1;
    }
    .contact_line {
        position: relative;
        width: 100%;
        z-index: 99999;
    }
    .contact_line img {
        position: absolute;
        width: 50%;
        top: 240px;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }
    .shop_id {
        position: absolute;
        width: 100%;
        top: 350px;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        font-size: 20px;
    }
    .shop_txt-2 {
        position: absolute;
        width: 100%;
        top: 390px;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        font-size: 13px;
        padding: 5px;
        text-align: center;
        z-index: 99999;
    }
    .shop_txt-3 {
        position: absolute;
        width: 70%;
        top: 480px;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        z-index: 99999;
    }
}

/* faq */
.Qa-Box {
    margin: 0 auto;
    width: 50%;
    color: #fff;
}

.Qa-Box .Qa dt,
.Qa-Box .Qa dd {
    display: flex;
    align-items: baseline;
    margin: 30px 0;
}

.Qa-Box .Qa dt p {
    margin: 0;
    padding-left: 15px;
    font-weight: bold;
    width: 100%;
    font-size: 16px;
    font-family: 'Yu Mincho', YuMincho ,serif;
    line-height: 1.5em;
}

.Qa-Box .Qa dd p {
    margin: 0;
    padding-left: 15px;
    width: 100%;
    font-size: 14px;
    font-family: 'Yu Mincho', YuMincho ,serif;
    line-height: 1.5em;
}

.Qa-Box .Qa dt::before {
    content: "Q";
    display: flex;
    justify-content: center;
    align-items: center;
    background: #D1B47B;
    color: #fff;
    width: 40px;
    height: 40px;
    font-size: 13px;
    font-family: 'Yu Mincho', YuMincho ,serif;
}

.Qa-Box .Qa dd::before {
    content: "A";
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2D455E;
    color: #fff;
    width: 40px;
    height: 40px;
    font-size: 13px;
    font-family: 'Yu Mincho', YuMincho ,serif;
}

@media screen and (max-width: 960px) {
    .txt-show {
        margin-top: -50px;
    }
    .Qa-Box {
        width: 90%;
    }
}

#faq-line {
    border-bottom: 1px solid #fff;
}

.txt-hide{
    display: none;
}

button.faq_more {
    width: 30%;
    margin: 20px auto;
    display: block;
    background-color: #666;
    color: #fff;
    padding:10px 15px;
    border: none;
    outline: 0;
    transition: .5s;
    -erbkit-transition: .5s;
    margin-top: 30px;
}

button.faq_more::after {
    content: "もっと見る";
    transition: .2s;
    -erbkit-transition: .2s;
    font-family: 'Yu Mincho', YuMincho ,serif;
}

button.faq_more.on-click::after{
    content: "閉じる";
    font-family: 'Yu Mincho', YuMincho ,serif;
}

.blanc {
    margin-bottom: 40px !important;
}

/* privacy policy */
.pp_area {
    margin: 0 auto;
    width: 60%;
    font-family: 'Yu Mincho', YuMincho ,serif;
    color: #fff;
    margin-top: 10%;
}

.pp_title {
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom:50px;
}

.pp_txt {
    font-size: 15px;
    letter-spacing: 0.1em;
    line-height: 1.8em;
    text-align: left;
    margin-bottom: 50px;
}

.pp_midashi {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.1em;
    padding: 1rem 2rem;
    border-left: 6px double #fff;
    margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
    .pp_area {
        width: 90%;
        margin-top: 100px;
    }
    .pp_title {
        font-size: 25px;
        line-height: 1.5em;
    }
    .pp_midashi {
        line-height: 1.5em;
    }
}

/* footer */

#footer {
    padding-top: 30px;
    position: relative;
    z-index: 99999;
    margin-top: 100px;
}

.footer_bg {
    width: 100%;
    background-image: url(https://www.insieme-detailing.jp/wp-content/themes/insieme/img/footer.PNG);
    background-size: cover;
    background-position:100%;
    position: relative;
    box-sizing: border-box;
    padding: 0;
    z-index: 55555;
}

.footer_bg::after {
    content: '';
    background-color: rgba(0,0,0,.6);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.footer_logo_main {
    font-family: adobe-caslon-pro, serif;
    font-size: 40px;
    color: #fff;
    padding: 30px 0 20px 80px;
    letter-spacing: 0.1em;
}

.footer_logo_sub {
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    padding-left: 10px;
    letter-spacing: 0.1em;
}

.footer_logo_main img {
	max-width: 330px;
}

.footer_area {
    margin: 0 auto;
    width: 90%;
    font-family: 'Yu Mincho', YuMincho ,serif;
    color: #fff;
    font-size: 15px;
    letter-spacing: 0.2em;
    line-height: 2em;
    margin-top: 30px;
    padding-bottom: 80px;
}

.footer_area a {
    color: #fff;
}

.footer_area ul {
    display: flex;
    flex-wrap:wrap;
}

.footer_area li {
    width: calc(100%/3);
    padding:0 15px;
    box-sizing:border-box;
}

.footer_title {
    font-size: min(max(13px, calc(0.8125rem + ((1vw - 7.68px) * 2.1552))), 18px);
    min-height: 0vw;
}

.footer_txt {
    width: 80%;
    font-size: min(max(13px, calc(0.8125rem + ((1vw - 7.68px) * 0))), 13px);
    min-height: 0vw;
    line-height: 2.2em;
}

.copyright {
    width: 100%;
    font-family: 'Yu Mincho', YuMincho ,serif;
    color: #fff;
    font-size: 13px;
    text-align: center;
    background: #2D455E;
    padding: 20px;
}

@media only screen and (max-width:768px) {
    .footer_logo_main {
        font-size: 40px;
        padding: 30px 20px 20px;
    }
    .footer_logo_sub {
        font-size: 18px;
    }
    .footer_area {
        width: 90%;
    }
    .footer_area li {
        width: calc(100%/1);
        margin-bottom: 20px;
        border-bottom: 1px solid #fff;
    }
    .footer_txt {
        width: 100%;
    }
}


/* service contents */
.service_cont-sub_title {
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 16px;
    text-align: center;
    letter-spacing: 0.1em;
    margin-top: 5px;
    margin-bottom: 40px;
}

.service_cont-explanation_area {
    margin: 0 auto;
    width: 90%;
    margin-bottom: 80px;
}

.service_cont-explanation {
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 14px;
    text-align: left;
    letter-spacing: 0.1em;
    margin-bottom: 40px;
}

.service_cont-box {
    padding: 20px 0;
}

.service_cont-boxInner {
    width: 100%;
    margin: 0 auto;
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.service_cont-txt-box {
    width: 50%;
}

.service_cont-pict {
    width: 50%;
    padding-right: 60px;
}

.service_cont-pict img {
    width: 100%;
    height:auto;
}

.service_cont-txt-title{
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: min(max(16px, calc(1rem + ((1vw - 4.8px) * 1.7308))), 25px);
    min-height: 0vw;
    font-weight: bold;
    letter-spacing: 0;
    margin-bottom: 20px;
    white-space: nowrap;
}

.service_cont-txt{
    font-family: 'Yu Mincho', YuMincho ,serif;
    letter-spacing: 0.1em;
    line-height: 2em;
}


@media (max-width:768px) {
    .service_cont-box {
        padding: 20px;
    }
    .service_cont-boxInner {
        width: 100%;
        flex-direction: column-reverse;
    }
    .service_cont-txt-box {
        width: 100%;
        padding-right: 0px;
    }
    .service_cont-pict {
        min-height: 0%;/* ie11用 */
        width: 100%;
        padding: 0;
        margin-bottom: 20px;
        text-align: center;
    }
    .service_cont-pict img {
        width: 100%;
        height: auto;
    }
}

/* size chart */

.size-box {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    font-family: 'Yu Mincho', YuMincho ,serif;
    padding-top: 20px;
    margin-bottom: 40px;
}

.size-box li {
    width: calc(50% - 20px);
    position: relative;
    padding: 0;
}

.size-box li img {
    max-width:100%; /*画像のはみだしを防ぐ*/
    height: auto; /*画像の縦横比を維持 */
}

.sc_menu_area {
    border: 1px solid #707070;
    background: #fff;
}

.sc_menu_area_menu {
    padding: 20px;
    line-height: 3em;
}

.sc_class {
    font-size: 20px;
    color: #fff;
    padding: 10px;
    text-align: center;
    background: #39526B;
}

.sc_menu {
    font-size: 18px;
    text-align: left;
    float: left;
}
.sc_price {
    font-size: 18px;
    text-align: right;
}

.sc_menu-2 {
    font-size: 20px;
    font-weight: bold;
    margin-top: 5px;
}

.sc_menu-3 {
    font-size: 13px;
}

.sc_note {
    color: #fff;
    text-align: right;
    font-size: 0.9em;
}
.sc_car {
    font-size: 25px;
    font-weight: bold;
    color: #A9A9A9;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 50px;
}

.sc_blac {
    margin-bottom: 20px;
}

.sc_menu_line {
    border: 1px solid #ccc;
}

@media screen and (max-width: 900px) {
    .size-box {
        width: 90%;
        margin-bottom: 10px;
    }
    .size-box li {
        width: calc(100% - 5px);
    }
}

.price_size-title {
    font-size: 30px;
    font-family: 'Yu Mincho', YuMincho ,serif;
    color: #fff;
    letter-spacing: 0.1em
}

.price_size-txt {
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 25px;
    font-weight: 900;
    color: #fff;
    text-align: center;
    margin: 40px 0 20px 0;
}

.price_size-txt-2 {
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .price_size-title {
        font-size: 25px;
    }
    .price_size-txt {
        font-size: 18px;
        line-height: 1.5em;
    }
    .price_size-txt-2 {
        font-size: 15px;
        line-height: 1.5em;
    }
}


/*---------------- 個別ページ ----------------*/

/* txt */
.title-border {
    display: flex;
    align-items: center;
    border-top: none;
}

.title-border:before,
.title-border:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #fff;
}

.title-border:before {
    margin-right: 1rem;
}

.title-border:after {
    margin-left: 1rem;
}

.title-border_2 {
    display: flex;
    align-items: center;
}

.title-border_2:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #fff;
}

.title-border_2:after {
    margin-left: 2rem;
}

.part_area {
    margin: -20% 0 -10% 0;
}

.part_area-2 {
    margin: 20% 0 -10% 0;
}

.part-title {
    font-size: 60px;
    font-family: 'Yu Mincho', YuMincho ,serif;
    color: #fff;
    letter-spacing: 0.1em;
    margin-left: 3%;
}

.part-sub-title {
    font-size: 20px;
    font-family: 'Yu Mincho', YuMincho ,serif;
    color: #fff;
    letter-spacing: 0.1em
}

.part-title-txt {
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 15px;
    color: #fff;
    text-align: left;
    letter-spacing: 0.1em;
    line-height: 2em;
    margin: 20px 0 30px 3%;
}

@media (max-width:768px) {
    .part_area {
        margin: -30% 0 -25% 0;
    }
    .part_area-2 {
        margin: 10% 0 -10% 0;
    }
    .part-title {
        font-size: 40px;
    }
    .part-sub-title {
        font-size: 18px;
    }
    .part-title-txt {
        margin: 0 auto 50px;
        width: 96%;
        font-size: 14px;
        line-height: 1.7;;
    }
}

/* main */
.page-mainttl {
	width: 100%;
	height: 700px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin-bottom: 40px;
	background-image: url(./img/smc_main.jpg);
	background-size: cover;
	background-position: center;
	position: relative;
}
.page-mainttl::before{
  background-color: rgba(0,0,0,0.6);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}
.page-mainttl.cppf {
	background-image: url(./img/new250217/cppf_main.jpg);
}
.page-mainttl.ppf {
	background-image: url(./img/new250217/ppf_main.jpg);
}
.page-mainttl.op {
	background-image: url(./img/op_main.jpg);
}
.page-mainttl.bas {
	background-image: url(./img/buy_main.jpg);
}

.contents_title {
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 35px;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0;
    text-align: center;
    position: relative;
}

.contents_sub_title {
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 16px;
    color: #fff;
    text-align: center;
    letter-spacing: 0;
    margin-top: 5px;
	position: relative;
}

.contents_explanation_area {
    margin: 0 auto;
    width: 70%;
    color: #fff;
    margin-bottom: -80px;
}

.contents_explanation {
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 15px;
    text-align: left;
    letter-spacing: 0.1em;
    line-height: 2em;
    margin-bottom: 40px;
}

@media (max-width:768px) {
    .contents_title {
        font-size: 23px;
    }
    .contents_sub_title {
        font-size: 14px;
    }
    .contents_explanation_area {
        width: 90%;
        margin-bottom: 0;
    }

    .contents_explanation {
        font-family: 'Yu Mincho', YuMincho ,serif;
        font-size: 14px;
        text-align: left;
        letter-spacing: 0.1em;
        line-height: 1.6;
        margin-bottom: 40px;
    }
}

.contents-area {
    padding-bottom: 300px;
}

@media screen and (max-width: 460px) {
    .contents-area {
        padding-bottom: 80px;
    }
}

/* ---画像左配置--- */

.cont_box-l {
    width: 100%;
    position: relative;
    padding-top: 200px;
    margin-bottom: 150px;
}

.cont_box-blnc-l {
    margin-top: 250px;
}

.cont_pict-l {
    position:relative;
    width: 60%;
    clip-path: polygon(0% 0%, 0% 220%, 100% 0%);
}

.cont_text_area-l {
    position: absolute;
    width: 80%;
    top: 50%;
    right: -12%;
}

.cont_title-l {
    position: absolute;
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.1em;
    line-height: 2em;
    top: -10%;
    right: 20%;
}

.contents_sub_title-l {
    position: absolute;
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 16px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.1em;
    top: -5%;
    right: 18%;
}

.cont_txt-l {
    position: absolute;
    margin: 0 auto;
    width: 50%;
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 15px;
    color: #fff;
    letter-spacing: 0;
    line-height: 2.5em;
    margin-top: 20px;
    top: 100px;
    right: 25%;
}

@media screen and (max-width: 460px) {
    .cont_box-l {
        padding-top: 50px;
        margin-bottom: 0;
    }
    .cont_pict-l {
        width: 100%;
        clip-path: polygon(0 0, 100% 0, 100% 50%, 0% 100%);
    }
    .cont_text_area-l {
		width: 94%;
		top: 0;
		right: 0;
		position: relative;
		margin: auto;
	}
    .cont_title-l {
        font-size: 24px;
        line-height: 1.5em;
        top: -110px;
        right: 2%;
		text-align: right;
    }
    .contents_sub_title-l {
        top: 65px;
        right: 1%;
    }
    .cont_txt-l {
        width: 100%;
        line-height: 1.6;
        margin: 80px auto 0;
        font-size: 14px;
        position: static;
    }
}

/* ---画像右配置--- */
.cont_box-r {
    width: 100%;
    position: relative;
    margin-bottom: 550px;
}

.cont_box-blnc-r {
    margin-top: 320px;
}

.cont_pict-r {
    position: absolute;
    width: 60%;
    clip-path: polygon(0% 0%, 100% 220%, 100% 0%);
    right: 0;
}

.cont_text_area-r {
    position: absolute;
    width: 80%;
    top: 50%;
    left: -10%;
    padding-top: 25%;
}

.cont_title-r {
    position: absolute;
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.1em;
    line-height: 2em;
    top: 35%;
    left: 15%;
}

.contents_sub_title-r {
    position: absolute;
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 16px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.1em;
    top: 30%;
    left: 30%;
}


.cont_txt-r {
    position: absolute;
    margin: 0 auto;
    width: 50%;
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 15px;
    color: #fff;
    letter-spacing: 0;
    line-height: 2.5em;
    top: 280px;
    left: 25%;
}

@media screen and (max-width: 460px) {
    .cont_box-r {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .cont_pict-r {
		position: relative;
        width: 100%;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%);
    }
    .cont_text_area-r {
        width: 94%;
		top: 0;
		left: 0;
		position: relative;
		margin: auto;
		padding-top: 0;
    }
    .cont_title-r {
        font-size: 24px;
        line-height: 1.5em;
        top: -110px;
        left: 2%;
    }
    .contents_sub_title-r {
        top: 55px;
        left: 1%;
    }
    .cont_txt-r {
        width: 100%;
        line-height: 1.6;
        margin: 80px auto 30px;
        font-size: 14px;
        position: static;
    }
}


.cont_title {
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.1em;
    line-height: 2em;
    text-align: center;
    margin-top: 10px;
}

.cont_sub_title {
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 15px;
    color: #fff;
    letter-spacing: 0.1em;
    line-height: 2em;
    text-align: center;
    margin-bottom: 25px;
}

.cont_txt {
    margin: 0 auto;
    width: 50%;
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 13px;
    color: #fff;
    letter-spacing: 0.1em;
    line-height: 3em;
    padding: 5px;
}

.cont_no {
    font-size: 100px;
    font-style: italic;
    font-weight: bold;
    color: #448aca;
    letter-spacing: 0em;
}

.cont_no-sub {
    font-size: 40px;
    font-style: italic;
    font-weight: bold;
    color: #448aca;
    letter-spacing: 0em;
}

@media (max-width:768px) {
    .cont_no {
        font-size: 40px;
    }
}

.cont_mask-box {
    width: 100%;
    height: 550px;
    overflow: hidden;
}

.cont_mask-box .cont_mask-boxInner {
    width: inherit;
    height: inherit;
    background-size: cover;
    line-height: 200px;
    font-size: 1.5em;
    text-align: center;
    color: #555;
    opacity: 0;
}

.isPlay {
    animation-name: play;
    animation-duration: .7s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.8,0,.5,1);
    position: relative;
    opacity: 1 !important;
}

.isPlay:before {
    animation-name: maskOut;
    animation-duration: .7s;
    animation-delay: .7s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.8,0,.5,1);
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: linear-gradient( 109.6deg,  rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );
}

@keyframes play {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes maskOut {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

@media (max-width:768px) {
    .cont_mask-box {
        height: 200px;
    }
}



.page_container {
    width: 100%;
    height: 400px;
}

.page_container,
.overlay:before {
    background: url(https://www.insieme-detailing.jp/wp-content/themes/insieme/img/new250217/bg_2.jpg) no-repeat fixed 0 0 / cover;
}

.page_container {
    align-items: center;
    display: flex;
    justify-content: center;
}

.overlay {
    height: 285px;
    margin: 0 auto;
    width: 80%;
    overflow: hidden;
    padding: 50px;
    position: relative;
    position: relative;
    text-align: center;
    z-index: 0;
}

.overlay:before {
    content: '';
    filter: blur(50px) brightness(25%);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

@media (max-width:460px) {
    .page_container,
    .overlay:before {
        background: url(https://www.insieme-detailing.jp/wp-content/themes/insieme/img/bg_2-sp.jpg) center no-repeat;
        background-size:cover;
    }
    .overlay {
        width: 94%;
        height: auto;
        padding: 30px 20px;
    }
}


/* ---SNSシェアボタン--- */
.sns__container {
    display: flex;
    margin-bottom: 80px;
}

.sns__midashi {
    font-family: 'Yu Mincho', YuMincho ,serif;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

.sns__container a {
    width: 100%;
    text-align: center;
    color: #fff;
    padding: 0.5rem 0;
}

.sns__container a:hover {
    opacity: 0.6;
}

.sns__twitter {
    background: #55acee;
}

.sns__facebook {
    background: #3b5998;
}

.sns__pocket {
    background: #ef3f56;
}

.sns__line {
    background: #1dcd00;
}

.sns__hatena {
    background: #00a5de;
}



.blac {
    margin-bottom: 100px;
}
.blac-2 {
    margin-bottom: 400px;
}
.blac-3 {
    margin-bottom: 150px;
}
.blac-4 {
    margin-bottom: 100px;
}
.blac-5 {
    margin-top: -80px;
}
.blac-6 {
    margin-top: 300px;
}

.blac-lcw_1 {
    margin-bottom: 350px;
}
.blac-lcw_2 {
    margin-bottom: 220px;
}
.blac-lcw_3 {
    margin-bottom: -150px;
}

.blac-cera_1 {
    margin-bottom: -320px;
}
.blac-cera_2 {
    margin-bottom: 750px;
}
.blac-cera_3 {
    margin-bottom: -150px;
}

.blac-op_1 {
    margin-bottom: 400px;
}
.blac-op_2 {
    margin-top: 640px;
}
.blac-op_4 {
    margin-top: 720px;
}
.blac-op_5 {
    margin-top: 200px;
}
.blac-op_6 {
    margin-bottom: 100px;
}

.blac-buy_3  {
    margin-bottom: -150px;
}

@media screen and (max-width: 768px) {
    .blac {
        margin-bottom: 50px;
    }
    .blac-3 {
        margin-bottom: 200px;
    }
    .blac-5 {
        margin-top: -130px;
    }
    .blac-6 {
        margin-top: 500px;
    }
    .blac-7 {
        margin-bottom: 10px;
    }

    .blac-cera_1 {
        margin-bottom: -180px;
    }

    .blac-op_1 {
        margin-top: 350px;
        margin-bottom: 0px;
    }
    .blac-op_2 {
        margin-top: 450px;
    }
    .blac-op_3 {
        margin-top: 270px;
    }
    .blac-op_4 {
        margin-top: 560px;
    }
    .blac-op_5 {
        margin-top: 450px;
    }
    .blac-op_6 {
        margin-bottom: 150px;
    }

    .blac-buy  {
        margin-bottom: -150px;
    }
    .blac-buy-1  {
        margin-bottom: 250px;
    }
    .blac-buy_1  {
        margin-top: 350px;
    }
    .blac-buy_2  {
        margin-top: 470px;
    }
    .blac-buy_3  {
        margin-bottom: 0px;
    }
}

@media (max-width:460px) { 
	.blac-cera_1, .blac-cera_2, .blac-cera_3 {
		margin-bottom: 0;
	}
	.blac-3 {
        margin-bottom: 50px;
    }
    .blac-4 {
        margin-bottom: 0;
    }
	
}

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

    aside {
        width: 100%;
    }

    .pc_only {
        display: none;
    }
    .sp_only {
        display: block;
    }
}

/* 2022.11.12 修正追加分 */
.veu_relatedPosts .relatedPosts_item > .media .media-heading a {
    color: #fff;
}
.sc_menu_line {
    margin: 10px 0;
}
@media screen and (max-width: 768px) {
    .news-content {
        width: 92vw;
    }
}
@media screen and (max-width: 480px) {
    .sc_menu {
        float: none;
    }
}


.film_box {
	font-family: 'Yu Mincho', YuMincho ,serif;
	color: #fff;
	width: 80%;
	margin: 100px auto -10%;
}
.film_ttl {
	font-size: 25px;
}
.film_item {
	font-size: 20px;
    margin-top: 15px;
}
.film_price {
    margin-left: 20px;
    font-size: 25px;
    font-weight: 700;
}
.film_text {
	letter-spacing: 0.1em;
	line-height: 2em;
	font-size: 16px;
}

@media screen and (max-width: 480px) {
	.film_box {
		width: 90%;
		margin: 100px auto 50px;
	}
	.film_text {
		letter-spacing: 0.1em;
		line-height: 1.7;
		font-size: 14px;
	}
}


/* video */
#video_wrap {
	position: relative;
	overflow: hidden;
	height: 100%;
}
.video-box {
	position: absolute;
	top: 0;
	right:0;
	left:0;
	bottom:0;
	overflow: hidden;
}
.video {
	max-width: none;
	min-width: 100%;
	min-height: 100vh;
	position: absolute;
}
@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
  .video {
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
  }
}
@media (max-aspect-ratio: 16/9) {
  .video {
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
}