@charset "UTF-8";
/*
Theme Name: Rich Pro map
Author: たかのともひろ
License: SUNCORE
License URI: https://sun-core.jp/
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;500;700&family=Noto+Serif:wght@400;700&display=swap');
/*==========================================================================
# reset - ブラウザの差異や不要なスタイルを無くすためのスタイル
========================================================================== */
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td, small, button, time, figure {
border: 0;
font: inherit;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}

html {
line-height: 1;
}

ol, ul {
list-style: none;
}

li, dd {
list-style-type: none;
}

header, footer, nav, section, article, aside, figure, figcaption {
display: block;
}

img {
border: none;
vertical-align: bottom;
}

a {
cursor: pointer;
text-decoration: none;
}

input,
textarea {
-webkit-appearance: none;
border-radius: 0;
}

html {
font-size: 16px;
font-family: 'Noto Serif','Noto Serif JP',serif;
}
body {
color: #444444;
font-size: 16px;
line-height: 1;
background-color: #FFF;
-webkit-text-size-adjust: 100%;
font-weight: 300;
letter-spacing: .01em;
box-sizing: border-box;
}
img {
width: 100%;
max-width: 100%;
height: auto;
image-rendering: -webkit-optimize-contrast;
}
a {
color: #444444;
text-decoration: none;
-webkit-transition: all 0.2s ease 0.1s;
transition: all 0.2s ease 0.1s;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:hover {
opacity: .8;
}
.sp-only{
display: none!important;
}
@media(max-width:767px){
.pc-only{
display: none!important;
}
.sp-only{
display: block!important;
}
}
/* 見出し */
.title-h2{
color: #444444;
font-size: 24px;
letter-spacing: .03em;
margin-bottom: 50px;
line-height: 1.5;
font-weight: 500;
}
.title-sub{
color: #caa164;
font-size: 16px;
letter-spacing: .02em;
margin-bottom: 15px;
line-height: 1.5;
}
@media(max-width:1024px){
.title-h2{
font-size: 22px;
margin-bottom: 35px;
}
.title-sub{
font-size: 15px;
margin-bottom: 12px;
}
}
@media(max-width:767px){
.title-h2{
font-size: 20px;
margin-bottom: 30px;
}
.title-sub{
font-size: 13px;
margin-bottom: 10px;
}
}
/* ボタン */
.btn{
display: block;
position: relative;
transition: all .2s linear;
}
.header-btn{
background-color: #caa164;
height: 55px;
line-height: 55px;
width: 265px;
color: #fff;
font-size: 14px;
padding-left: 20px;
box-shadow: 0 4px 16px 0 rgb(0 0 0 / 15%);
}
.header-btn::before{
content:"";
position: absolute;
top:50%;
right:20px;
width:25px;
height:1px;
background:#fff;
transition: all .2s linear;
}
.header-btn::after{
content:"";
position: absolute;
top: 22px;
right: 22px;
width: 1px;
height: 7px;
background:#fff;
transform:skewX(45deg);
transition: all .2s linear;
}
.header-btn:hover::before{
right:8px;
}
.header-btn:hover::after{
right:10px;
}
.silver-btn{
background-color: #caa164;
height: 50px;
line-height: 50px;
width: 260px;
color: #fff;
font-size: 15px;
font-weight: 500;
padding-left: 20px;
box-shadow: 0 4px 16px 0 rgb(0 0 0 / 15%);
}
.silver-btn::before{
content:"";
position: absolute;
top:50%;
right:20px;
width:20px;
height:1px;
background:#fff;
transition: all .2s linear;
}
.silver-btn::after{
content:"";
position: absolute;
top: 20px;
right: 22px;
width: 1px;
height: 6px;
background:#fff;
transform:skewX(45deg);
transition: all .2s linear;
}
.silver-btn:hover::before{
right:8px;
}
.silver-btn:hover::after{
right:10px;
}
.top-plan-btn{
margin: 50px auto 0;
padding-left: 30px;
letter-spacing: .02em;
box-shadow: 0 4px 16px 0 rgb(0 0 0 / 15%);
}
.top-case-btn{
margin: auto;
margin-top: 60px;
padding-left: 30px;
letter-spacing: .04em;
box-shadow: 0 4px 16px 0 rgb(0 0 0 / 15%);
}
.top-news2-btn{
margin: auto;
padding-left: 30px;
letter-spacing: .02em;
box-shadow: 0 4px 16px 0 rgb(0 0 0 / 15%);
}
.footer-btn{
background-color: #caa164;
height: 70px;
line-height: 70px;
width: 320px;
color: #fff;
font-size: 15px;
padding-left: 30px;
letter-spacing: .02em;
box-shadow: 0 4px 16px 0 rgb(0 0 0 / 15%);
}
.footer-btn::before{
content:"";
position: absolute;
top:50%;
right:20px;
width:25px;
height:1px;
background:#fff;
transition: all .2s linear;
}
.footer-btn::after{
content:"";
position: absolute;
top: 29px;
right: 22px;
width: 1px;
height: 7px;
background:#fff;
transform:skewX(45deg);
transition: all .2s linear;
}
.footer-btn:hover::before{
right:8px;
}
.footer-btn:hover::after{
right:10px;
}
.about-service-btn{
margin: auto;
box-shadow: 0 4px 16px 0 rgb(0 0 0 / 15%);
}
@media(max-width:1024px){
.footer-btn{
height: 65px;
line-height: 65px;
width: 300px;
padding-left: 25px;
letter-spacing: .01em;
}        
.footer-btn::before{
top:54%;
}
}
@media(max-width:767px){
.silver-btn{
margin: auto;
}
.top-about-btn{
margin-top: 30px;
}
.footer-btn{
padding-left: 0;
margin-right: auto;
margin-left: auto;
letter-spacing: .02em;
}
}
/* グローバルナビ */
.header{
border-bottom: 3px solid #caa164;
}
.header-inner{
margin: 0 30px 0 40px;
padding-top: 20px;
padding-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-logo{

}
.header-logo img{
height: 65px;
width: auto;
}
#logo{
font-size: 12px;
}
#logo span{
font-size: 26px;
margin-top: 5px;
display: block;
white-space: nowrap;
}
.header-right{
display: flex;
align-items: center;
}
.header-tel{
margin-right: 20px;
letter-spacing: .02em;
}
.tel-num{
font-size: 25px;
position: relative;
font-family: serif;
}
.tel-num::after{
content: "";
background: url(img/00_common/tel.webp) no-repeat center;
background-size: contain;
width: 22px;
height: 22px;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -30px;
}
.tel-text{
font-size: 12px;
margin-top: 5px;
}
.g-nav{
margin-right: 15px;
padding-bottom: 20px;
}
.g-nav-list{
display: flex;
justify-content: end;
}
.g-nav-list li{
border-right: 1px solid #444444;
}
.g-nav-list li:last-child{
border-right: none;
}
.g-nav-list li a{
padding: 1px 15px;
display: block;
font-size: 13px;
}
@media(max-width:1024px){
.header-tel{
display: none;
}
.g-nav{
padding-bottom: 15px;
}    
.g-nav-list{
justify-content: center;
}
.g-nav-list li a{
padding: 1px 10px;
font-size: 12px;
}
}
@media(max-width:767px){
.header{
margin-bottom: 60px;
border-bottom: none;
}
.header-inner{
margin: 0;
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
position: fixed;
top: 0;
z-index: 999;
background-color: #fff;
width: 100%;
}
.header-logo{
/* margin-left: 15px; */
margin-left: 8px;
}
.header-logo img{
height: 45px;
}
#logo{
font-size: 10px;
}
#logo span{
font-size: 20px;
margin-top: 5px;
}
.header-contact{
background-color: #caa164;
width: 60px;
height: 60px;
position: fixed;
top: 0;
right: 60px;
}
.header-contact img{
width: 25px;
height: 25px;
text-align: center;
display: block;
margin: auto;
margin-top: 10px;
margin-bottom: 5px;
}
.header-contact span{
color: #fff;
font-size: 12px;
text-align: center;
display: block;
}
}
/*　ハンバーガーボタン */
@media(max-width:767px){
.hamburger {
display : block;
position: fixed;
z-index : 3;
right : 32px;
right : 0;
top   : 32px;
top   : 0;
width : 42px;
height: 42px;
width : 60px;
height: 60px;
cursor: pointer;
text-align: center;
background-color: #939393;
}
.hamburger span {
display : block;
position: absolute;
width   : 30px;
height  : 1px ;
left    : 50%;
background : #fff;
-webkit-transition: 0.5s all;
-moz-transition   : 0.5s all;
transition        : 0.5s all;
}
.hamburger span:nth-child(1) {
top: calc(50% - 10px);
transform: translate(-50% , -50%);
}
.hamburger span:nth-child(2) {
top: 50%;
transform: translate(-50% , -50%);
}
.hamburger span:nth-child(3) {
top: calc(50% + 10px);
transform: translate(-50% , -50%);
}
/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
top : 30px;
left: 18px;
width: 25px;
background : #fff;
-webkit-transform: rotate(-45deg);
-moz-transform   : rotate(-45deg);
transform        : rotate(-45deg);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
-webkit-animation: active-btn17-bar02 .8s forwards;
animation: active-hamburger-bar02 .8s forwards;
}
@-webkit-keyframes active-hamburger-bar02 {
100% {
height: 0;
}
}
@keyframes active-hamburger-bar02 {
100% {
height: 0;
}
}
.hamburger.active span:nth-child(3) {
top: 30px;
left: 18px;
width: 25px;
background : #fff;
-webkit-transform: rotate(45deg);
-moz-transform   : rotate(45deg);
transform        : rotate(45deg);
}
.hamburger::after {
position: absolute;
top: 50%;
left: 50%;
display: block;
content: '';
width: 60px;
height: 60px;
margin: -32px 0 0 -32px;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0);
transition: all .75s;
}
nav.globalMenuSp {
position: fixed;
z-index : 50;
top  : 0;
left : 0;
color: #fff;
background-color: #939393;
text-align: center;
width: 100%;
height: 100vh;
display: none;
transition: opacity .6s ease, visibility .6s ease;
}
nav.globalMenuSp ul {
margin: 0 auto;
padding: 0;
padding-top: 20px;
width: 100%;
display: block;
}
nav.globalMenuSp ul li {
list-style-type: none;
padding: 0;
width: 100%;
transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
background :#ddd;
}
nav.globalMenuSp ul li a {
display: block;
color: #fff;
text-decoration :none;
height: 45px;
line-height: 45px;
padding: 0;
font-size: 14px;
}
/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
display: block;
margin-top: 60px;
}
}
/* ファーストビュー */
.fv{

}
.fv img{
max-width: 100%;
height: auto;
}
@media(max-width:767px){
.fv{

}
.fv img{
max-width: 100%;
height: 100%;
object-fit: cover;
}
}
/* お知らせ */
.top-news{
position: relative;
}
.top-news-inner{
position: absolute;
top: -50px;
right: 30px;
padding: 0 40px;
max-width: 720px;
width: 100%;
height: 100px;
background-color: #fff;
display: flex;
align-items: center;
box-shadow: 0 5px 10px #EFEFEF;
}
.top-news-inner:hover{
opacity: 1;
}
.top-news-title{
font-size: 20px;
color: #caa164;
margin-right: 50px;
}
.top-news-date{
font-size: 14px;
margin-right: 20px;
}
.top-news-text{
font-size: 14px;
line-height: 1.5;
}
@media(max-width:767px){
.top-news{

}
.top-news-inner{
position: inherit;
top: auto;
right: auto;
padding: 20px 20px;
margin-top: -10px;
margin-left: 15px;
margin-right: 15px;
max-width: 100%;
width: calc(100% - 30px);
display: block;
height: auto;
}
.top-news-title{
font-size: 18px;
margin-right: 0;
text-align: center;
margin-bottom: 15px;
}
.top-news-date{
font-size: 12px;
margin-right: 0;
margin-bottom: 10px;
}
.top-news-text{
font-size: 14px;
line-height: 1.5;
}
}
/* トップメッセージ */
.top-about{
position: relative;
padding-top: 150px;
height: 600px;
}
.top-about::before{
position: absolute;
content: '';
left: 0;
top: 0;
width: 55%;
height: 560px;
z-index: -1;
background: #f6f2ea;
}
.top-about-inner{
display: flex;
justify-content: center;
align-items: center;
}
.top-about-title{
margin-right: 100px;
}
.top-about-text{
width: 33%;
}
.top-about-text p{
line-height: 2.2;
font-size: 14.5px;
}
@media(max-width:1024px){
.top-about{
padding-top: 120px;
height: 500px;
}
.top-about::before{
width: 60%;
height: 430px;
}
.top-about-title{
margin-right: 45px;
}
.top-about-text{
width: 52%;
}
.top-about-text p{
line-height: 1.8;
font-size: 15px;
}
}
@media(max-width:767px){
.top-about{
padding-top: 50px;
height: auto;
}
.top-about::before{
width: 50%;
height: 530px;
top: -80px;
}
.top-about-inner{
display: block;
padding-left: 15px;
padding-right: 15px;
}
.top-about-title{
margin-right: 0;
}
.top-about-text{
max-width: 100%;
width: 100%;
}
.top-about-text p{
font-size: 14px;
line-height: 1.6;
}
}
/* 選ばれる理由 */
.top-features{

}
.top-features-inner{
margin-right: auto;
margin-left: auto;
max-width: 1100px;
padding-top: 100px;
padding-bottom: 60px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
.top-features-title{
position: absolute;
top: 100px;
}
.top-features-list{
display: flex;
justify-content: space-around;
}
.top-features-list li{
width: 30%;
}
.top-features-list li:nth-child(1){
padding-top: 200px;
}
.top-features-list li:nth-child(2){
padding-top: 100px;
}
.top-features-list li:nth-child(3){
padding-top: 0px;
}
.top-features-list li img{
/* margin-bottom: 25px; */
}
.top-features-list-text01{
color: #caa164;
font-size: 14px;
margin-bottom: 15px;
line-height: 1.5;
letter-spacing: .01em;
}
.top-features-list-text01 span{
font-size: 26px;
padding-left: 5px;
}
.top-features-list-text02{
margin-bottom: 12px;
line-height: 1.5;
letter-spacing: .05em;
font-weight: 500;
font-size: 17px;
}
.top-features-list-text03{
line-height: 1.5;
letter-spacing: .01em;
font-size: 13px;
}
@media(max-width:1024px){
.top-features-list-text01{
margin-bottom: 10px;
}
.top-features-list-text02{
    font-size: 14px;
    letter-spacing: 0;
}
}
@media(max-width:767px){
.top-features-inner{
max-width: 100%;
padding-left: 15px;
padding-right: 15px;
padding-top: 80px;
padding-bottom: 60px;
position: inherit;
}
.top-features-title{
position: inherit;
top: 0;
}
.top-features-list{
display: block;
}
.top-features-list li{
width: 100%;
}
.top-features-list li:nth-child(1){
padding-top: 0;
margin-bottom: 60px;
}
.top-features-list li:nth-child(2){
padding-top: 0;
margin-bottom: 60px;
}
.top-features-list li:nth-child(3){
padding-top: 0;
}
.top-features-list li img{
/* margin-bottom: 25px; */
}
.top-features-list-text01{
font-size: 14px;
margin-bottom: 15px;
line-height: 1.5;
letter-spacing: .01em;
}
.top-features-list-text01 span{
font-size: 26px;
padding-left: 5px;
}
.top-features-list-text02{
margin-bottom: 16px;
font-size: 16px;
}
.top-features-list-text03{

}
}
/* 画像 */
.about-parts__imgWrapper {
position: relative;
width: 100%;
padding-top: 400px;
margin-bottom: 20px;
}
.about-parts__img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
-o-object-fit: cover;
object-fit: cover;
}
.bg-wrapper {
top: 0;
position: absolute;
content: "";
z-index: 30;
background: #caa164;
width: 100%;
height: 100%;
}
.bg-wrapperSecond {
top: 0;
position: absolute;
content: "";
z-index: 30;
background: #caa164;
width: 100%;
height: 100%;
}
.bg-wrapperThird {
top: 0;
position: absolute;
content: "";
z-index: 30;
background: #caa164;
width: 100%;
height: 100%;
}
.imgChange {
-webkit-animation-name: PageAnime;
animation-name: PageAnime;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.imgChange--reverse {
-webkit-animation-name: PageAnime-reverse;
animation-name: PageAnime-reverse;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@media(max-width:1024px){
.about-parts__imgWrapper {
padding-top: 270px;
margin-bottom: 15px;
}
}
@-webkit-keyframes PageAnime {
0% {
-webkit-transform-origin: right;
transform-origin: right;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform-origin: right;
transform-origin: right;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
@keyframes PageAnime {
0% {
-webkit-transform-origin: right;
transform-origin: right;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform-origin: right;
transform-origin: right;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
@-webkit-keyframes PageAnime-reverse {
0% {
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
@keyframes PageAnime-reverse {
0% {
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
/* 画像おわり */
/* 会員データ */
.top-data{
/* 方眼紙 https://web-dev.tech/front-end/css/graph-paper-background/ */
background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
background-size: 30px 30px;
background-repeat: repeat;
border-top: 3px solid #caa164;
}
.top-data-inner{
margin-right: auto;
margin-left: auto;
max-width: 1050px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 100px;
padding-top: 100px;
}
.top-data-title{
text-align: center;
}
.top-data-list{
display: flex;
justify-content: space-around;
align-items: center;
text-align: center;
margin: 100px auto 60px;
}
.top-data-list-item{

}
.top-data-list-title{
font-size: 18px;
margin-bottom: 20px;
letter-spacing: .02em;
}
.top-data-list-num{
font-size: 70px;
letter-spacing: .02em;
color: #444444;
}
.top-data-list-border{
width: 35px;
height: 1px;
background:#444444;
}
.top-data-text{
text-align: center;
font-size: 12px;
}
.member-list{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 100px;
}
.member-list-l{
width: 50%;
}
.member-list-r{
width: 50%;
}
.member-item{
width: 95%;
box-shadow: 0 5px 20px #EBEBEB;
margin: auto;
margin-bottom: 20px;
padding: 20px 30px;
display: flex;
flex-wrap: wrap;
background-color: #fff;
}
.member-item-man{
border-top: 3px solid #55A1DB;
border-bottom: 3px solid #55A1DB;
}
.member-item-woman{
border-top: 3px solid #E09697;
border-bottom: 3px solid #E09697;
}
.member-img{
width: 85px;
margin-right: 15px;
}
.member-img img{
width: 85px;
height: 85px;
}
.member-text{
font-size: 14px;
font-weight: 500;
margin-top: 10px;
text-align: center;
letter-spacing: .02em;
line-height: 1.5;
}
.member-status{
width: calc(100% - 100px);
display: flex;
flex-wrap: wrap;
}
.member-status-item {
width: 50%;
font-size: 12px;
font-weight: 500;
text-align: center;
padding: 12px 0;
}
.member-status-item span{
font-size: 16px;
display: block;
margin-top: 10px;
letter-spacing: .02em;
}
.member-status-item01{
border-right: 1px dotted #d6d6d6;
border-bottom: 1px dotted #d6d6d6;
}
.member-status-item02{
border-bottom: 1px dotted #d6d6d6;
}
.member-status-item03{
border-right: 1px dotted #d6d6d6;
}
.member-status-item04{

}
.member-comment{
width: 100%;
margin-top: 25px;
line-height: 1.5;
}
.member-comment01{
font-size: 12px;
margin-bottom: 5px;
}
.member-comment02{
font-size: 14px;
}
.member-item-memo{
font-size: 12px;
margin-left: 25px;
line-height: 1.5;
}
@media(max-width:1024px){
.top-data-inner{
max-width: 100%;
padding-bottom: 100px;
padding-top: 100px;
}
.top-data-list{
margin: 80px auto 40px;
}
.top-data-list-title{
font-size: 16px;
margin-bottom: 12px;
}
.top-data-list-num{
font-size: 60px;
}
.top-data-list-border{
width: 30px;
}
.member-list{
margin-top: 60px;
}
.member-item{
margin-bottom: 15px;
padding: 15px 20px;
}
.member-img{
width: 80px;
margin-right: 12px;
}
.member-img img{
width: 80px;
height: 80px;
}
.member-text{
font-size: 13px;
margin-top: 8px;
line-height: 1.4;
}
.member-status{
flex: 1;
}
.member-status-item {
width: 50%;
font-size: 11px;
padding: 12px 0;
}
.member-status-item span{
font-size: 14px;
margin-top: 8px;
}
.member-comment{
margin-top: 20px;
}
.member-comment01{
font-size: 12px;
margin-bottom: 5px;
}
.member-comment02{
font-size: 13px;
}
}
@media(max-width:767px){
.top-data{

}
.top-data-inner{
max-width: 100%;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 40px;
padding-top: 60px;
}
.top-data-title{
text-align: center;
}
.top-data-list{
display: block;
margin: 40px auto 60px;
}
.top-data-list-item{

}
.top-data-list-title{
font-size: 17px;
margin-bottom: 18px;
}
.top-data-list-num{
font-size: 56px;
}
.top-data-list-border{
width: 35px;
height: 1px;
background:#444444;
margin: 25px auto 50px;
}
.top-data-text{
text-align: center;
font-size: 12px;
}
.member-list{
display: block;
margin-top: 30px;
}
.member-list-l{
width: 100%;
}
.member-list-r{
width: 100%;
}
.member-item{
width: 100%;
margin-bottom: 20px;
padding: 15px;
}
.member-text{
font-size: 12px;
margin-top: 8px;
line-height: 1.3;
}
.member-status-item {
font-size: 11px;
text-align: center;
padding: 12px 0;
}
.member-status-item span{
font-size: 14px;
margin-top: 10px;
}
.member-comment{
margin-top: 20px;
}
.member-comment01{
font-size: 12px;
}
.member-comment02{
font-size: 13px;
}
.member-item-memo{
font-size: 11px;
margin-left: 0;
}
}
/* 料金 */
.top-plan{
background-color: #f6f2ea;
}
.top-plan-inner{
max-width: 1100px;
margin: auto;
padding-top: 100px;
padding-bottom: 80px;
padding-left: 15px;
padding-right: 15px;
}
.plan__box {
position: relative;
background-color: #FFF;
width: 100%;
height: 100%;
padding: 120px 60px;
}
.top-plan-title{
text-align: center;
}
.plan__box-corner {
position: absolute;
width: 108px;
height: 108px;
}
.plan__box-corner::before {
content: '';
position: absolute;
width: 0;
height: 0;
}
.plan__box-corner::after {
content: '';
position: absolute;
background: #caa164;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 50%;
z-index: 30;
left: -19%;
width: 152.712px;
height: 2px;
}
.plan__box-corner--top-left {
top: 0px;
left: 0px;
}
.plan__box-corner--top-left::before {
border-top: 108px solid #f6f2ea;
border-right: 108px solid transparent;
}
.plan__box-corner--bottom-right {
bottom: 0px;
right: 0px;
}
.plan__box-corner--bottom-right::before {
border-top: 108px solid transparent;
border-right: 108px solid #f6f2ea;
}
.plan-memo{
font-size: 12px;
/* text-align: right; */
margin-top: 15px;
margin-left: 8px;
line-height: 1.4;
}
@media(max-width:767px){
.top-plan-inner{
max-width: 100%;
padding-top: 50px;
padding-bottom: 60px;
}
.plan__box {
padding: 30px 0 50px;
width: 100%;
margin-left: 0;
margin-right: 0;
}
.plan__box-corner {
position: absolute;
width: 60px;
height: 60px;
}
.plan__box-corner::before {
content: '';
position: absolute;
width: 0;
height: 0;
}
.plan__box-corner::after {
content: '';
position: absolute;
background: #caa164;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 50%;
z-index: 30;
left: -15px;
width: 86px;
height: 1px;
}
.plan__box-corner--top-left {
top: 0px;
left: 0px;
}
.plan__box-corner--top-left::before {
border-top: 60px solid #f6f2ea;
border-right: 60px solid transparent;
}
.plan__box-corner--bottom-right {
bottom: 0px;
right: 0px;
}
.plan__box-corner--bottom-right::before {
border-top: 60px solid transparent;
border-right: 60px solid #f6f2ea;
}
}
/* パソコン用の料金プラン */
.plan__table {
width: 100%;
border-collapse: collapse;
padding: 0 50px;
text-align: center;
}
.plan__row {
border-bottom: 0.5px solid #8e8e8e;
height: 75px;
}
.plan__row--header {
height: 75px;
}
.plan__cell {
width: 25%;
vertical-align: middle;
white-space: nowrap;
font-family: serif;
letter-spacing: .03em;
}
.plan__title{
font-size: 17px;
}
.plan__title span{
font-size: 13px;
color: #caa164;
margin-bottom: 10px;
display: block;
letter-spacing: .02em;
}
.plan__data{
font-size: 22px;
}
.plan__data span{
font-size: 16px;
padding-left: 3px;
}
@media(max-width:1024px){
.plan__data{
font-size: 20px;
}
.plan__data span{
font-size: 15px;
padding-left: 3px;
}
}
/* スマホ用の料金プラン */
@media(max-width:767px){
.top-plan-sp{
padding: 15px;
}
.top-plan-sp-item{
padding: 30px 15px 0;
border-bottom: 0.5px solid #8e8e8e;
}
.top-plan-title{
font-size: 20px;
margin-bottom: 30px;
}
.top-plan-title span{
font-size: 14px;
color: #caa164;
margin-bottom: 8px;
display: block;
}
.top-plan-list{

}
.top-plan-list li{
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}
.top-plan-list-l{
font-size: 15px;
}
.top-plan-list-r{
font-size: 22px;
font-family: serif;
}
.small-yen{
font-size: 16px;
}
}
/* カウンセラー紹介 */
.top-counselor{
padding-top: 100px;
padding-bottom: 100px;
}
.top-counselor-inner{
display: flex;
flex-direction: row-reverse;
align-items: center;
max-width: 1100px;
margin: auto;
position: relative;
height: 450px;
}
.top-counselor-l{
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.top-counselor-l img{
object-fit: cover;
width: 600px;
height: 450px;
}
.top-counselor-r{
width: 50%;
}
.top-counselor-text01{
line-height: 1.6;
margin-bottom: 20px;
}
.top-counselor-text02{
font-size: 14px;
margin-bottom: 15px;
}
.top-counselor-text03{
font-size: 18px;
font-weight: 500;
margin-bottom: 60px;
}
.top-counselor-btn{

}
/* 画面内に入った要素の背景色を横から延ばす方法 https://yuntu-tek.com/extend-background-color/ */
.bg-text{
position: relative;
font-size: 32px;
color: #fff;
padding: 1px 5px;
}
.bg-text span{
position: relative;
}
.bg-text::before{
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: #caa164;
transition: .7s;
}
.fade::before {
width: 100%;
}
@media(max-width:1024px){
.top-counselor{
padding-top: 80px;
padding-bottom: 60px;
}
.top-counselor-inner{
max-width: 100%;
height: 360px;
}
.top-counselor-l img{
width: 400px;
height: 300px;
}
.top-counselor-r{
width: 55%;
}
.top-counselor-text01{
line-height: 1.6;
margin-bottom: 20px;
}
.top-counselor-text02{
font-size: 14px;
margin-bottom: 15px;
}
.top-counselor-text03{
font-size: 18px;
font-weight: 500;
margin-bottom: 40px;
}
.bg-text{
font-size: 24px;
}
}
@media(max-width:767px){
.top-counselor{
padding-top: 60px;
padding-bottom: 100px;
}
.top-counselor-inner{
display: block;
max-width: 100%;
position: initial;
height: 450px;
padding-left: 15px;
padding-right: 15px;
}
.top-counselor-l{
position: initial;
left: auto;
top: auto;
}
.top-counselor-l img{
object-fit: cover;
width: 100%;
height: auto;
}
.top-counselor-r{
width: 100%;
margin-top: -20px;
}
.top-counselor-text02{
font-size: 12px;
margin-bottom: 10px;
}
.top-counselor-text03{
font-size: 16px;
margin-bottom: 40px;
}
.bg-text{
font-size: 18px;
}
}
/* ご成婚実績 */
.top-case{

}
.top-case-inner{
max-width: 1100px;
margin: auto;
padding-bottom: 100px;
padding-left: 15px;
padding-right: 15px;
}
.top-case-title{
text-align: center;
}
.top-case-list{
display: flex;
justify-content: space-between;
align-items: baseline;
}
.top-case-item{
width: 330px;
display: block;
}
.top-case-item img{
width: 330px;
height: 260px;
object-fit: cover;
}
.top-case-item h3{
font-size: 16px;
color: #caa164;
margin-top: 25px;
text-align: center;
}
.top-case-item p{
font-size: 12px;
margin-top: 12px;
text-align: center;
}
@media(max-width:1024px){
.top-case-item{
width: 32%;
}
.top-case-item img{
height: 200px;
}
.top-case-item h3{
font-size: 14.5px;
margin-top: 15px;
}
.top-case-item p{
font-size: 12px;
margin-top: 12px;
}
}
@media(max-width:767px){
.top-case-inner{
max-width: 100%;
padding-right: 15px;
padding-left: 15px;
padding-bottom: 80px;
}
.top-case-list{
display: block;
}
.top-case-item{
width: 100%;
margin-bottom: 30px;
}
.top-case-item img{
width: 100%;
height: 260px;
object-fit: cover;
}
.top-case-item h3{
font-size: 16px;
margin-top: 15px;
}
.top-case-item p{
font-size: 12px;
margin-top: 10px;
}
}
/* 無料カウンセリングのご案内 */
.top-contact2{

}
.top-contact2-inner{
max-width: 1200px;
margin: auto;
padding-bottom: 100px;
}
.top-contact2-title{
text-align: center;
}
.top-contact2-content{
display: flex;
align-items: center;
}
.top-contact2-l{
margin-right: 60px;
}
.top-contact2-img{
position: relative;
}
.top-contact2-img::before{
position: absolute;
content: '';
bottom: -60px;
left: -120px;
background-color: #F6F2EA;
width: 480px;
height: 350px;
z-index: -1;
}
.top-contact2-img img{
max-width: 550px;
}
.top-contact2-r{
max-width: 530px;
}
.top-contact2-r h3{
font-size: 21px;
line-height: 1.5;
border-bottom: 1px solid #444444;
padding-bottom: 20px;
font-weight: 500;
letter-spacing: .02em;
}
.top-contact2-r p{
margin-top: 20px;
margin-bottom: 40px;
font-size: 16px;
line-height: 1.6;
letter-spacing: .02em;
}
@media screen and (max-width: 1024px) {
.top-contact2-content{
margin-top: 80px;
}
.top-contact2-inner{
max-width: 100%;
padding-bottom: 40px;
}
.top-contact2-l{
margin-right: 40px;
}
.top-contact2-img::before{
display: none;
}
.top-contact2-img img{
max-width: 550px;
}
.top-contact2-r{
max-width: 440px;
margin-right: 30px;
}
.top-contact2-r h3{
font-size: 18px;
padding-bottom: 15px;
}
.top-contact2-r p{
margin-top: 15px;
margin-bottom: 30px;
font-size: 14px;
line-height: 1.5;
}
}
@media screen and (max-width: 767px) {
.top-contact2{

}
.top-contact2-inner{
max-width: 100%;
padding-bottom: 30px;
}
.top-contact2-title{

}
.top-contact2-content{
display: block;
}
.top-contact2-l{
margin-right: 0;
}
.top-contact2-img{

}
.top-contact2-img::before{
bottom: -300px;
left: 0;
width: 300px;
height: 300px;
}
.top-contact2-img img{
max-width: 100%;
}
.top-contact2-r{
max-width: 100%;
padding-left: 15px;
padding-right: 15px;
margin-right: 0;
}
.top-contact2-r h3{
font-size: 15px;
padding-bottom: 20px;
padding-top: 25px;
}
.top-contact2-r p{
margin-top: 20px;
margin-bottom: 30px;
font-size: 14px;
}
}
/* お知らせ＆ブログ */
.top-news2{

}
.top-news2-inner{
max-width: 1100px;
margin: auto;
display: flex;
justify-content: space-between;
padding-top: 100px;
padding-bottom: 100px;
padding-left: 15px;
padding-right: 15px;
}
.top-news2-l,
.top-news2-r{
width: 45%;
}
.top-news2-title{
text-align: center;
}
.top-news2-list{
margin-bottom: 50px;
}
.top-news2-list li{
border-bottom: 0.5px solid #8e8e8e;
}
.top-news2-list li a{
padding: 20px 0;
display: block;
}
.top-news2-list-text01{
font-size: 16px;
margin-bottom: 15px;
line-height: 1.5;
}
.top-news2-list-text02{
font-size: 14px;
display: flex;
}
.top-news2-list-text02-data{

}
.top-news2-list-text02-category{
color: #caa164;
text-decoration: underline;
margin-left: 20px;
}
@media(max-width:767px){
.top-news2-inner{
max-width: 100%;
padding-left: 15px;
padding-right: 15px;
display: block;
padding-top: 60px;
padding-bottom: 60px;
}
.top-news2-l,
.top-news2-r{
width: 100%;
}
.top-news2-r{
margin-top: 60px;
}
.top-news2-title{
margin-bottom: 20px;
}
.top-news2-title .title-h2 {
margin-bottom: 0;
}
.top-news2-list{
margin-bottom: 30px;
}
.top-news2-list li{

}
.top-news2-list li a{
padding: 15px 0;
display: block;
}
.top-news2-list-text01{
font-size: 14px;
margin-bottom: 12px;
}
.top-news2-list-text02{
font-size: 12px;
}
.top-news2-list-text02-data{

}
.top-news2-list-text02-category{
margin-left: 15px;
}
}
/* バナー */
.top-banner{

}
.top-banner-inner{
max-width: 1100px;
margin: auto;
margin-bottom: 100px;
display: flex;
justify-content: space-between;
padding-left: 15px;
padding-right: 15px;
}
.top-banner-l,
.top-banner-r{
width: 48%;
border: 1px solid #caa164;
padding: 15px;
display: flex;
}
.top-banner-img{
margin-right: 15px;
}
.top-banner-img img{
width: 150px;
height: 150px;
}
.top-banner-text{
flex: 1;
}
.top-banner-text01{
font-size: 20px;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #caa164;
letter-spacing: .02em;
}
.top-banner-text02{
font-size: 14px;
line-height: 1.5;
padding-top: 20px;
}
@media(max-width:1024px){
.top-banner-inner{
max-width: 100%;
margin-bottom: 70px;
}
.top-banner-l,
.top-banner-r{
width: 49%;
padding: 10px 5px;
}
.top-banner-img{
margin-right: 12px;
}
.top-banner-img img{
width: 100px;
height: 100px;
}
.top-banner-text01{
font-size: 15.5px;
padding-top: 10px;
padding-bottom: 10px;
}
.top-banner-text02{
font-size: 13px;
padding-top: 10px;
}
}
@media(max-width:767px){
.top-banner-inner{
max-width: 100%;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 60px;
display: block;
}
.top-banner-l,
.top-banner-r{
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
.top-banner-img{
margin-right: 10px;
}
.top-banner-img img{
width: 100px;
height: 100px;
}
.top-banner-text01{
font-size: 16px;
padding-top: 5px;
padding-bottom: 10px;
}
.top-banner-text02{
font-size: 12px;
line-height: 1.5;
padding-top: 10px;
}
}
/* フッター */
.footer{
border-top: 3px solid #caa164;
background-color: #f6f2ea;
}
.footer-inner{
display: flex;
}
.footer-l{
width: calc(50% - 170px);
margin-left: 170px;
}
.footer-logo{
margin-top: 45px;
margin-bottom: 20px;
display: block;
}
.footer-logo img{
max-width: 210px;
width: 100%;
height: auto;
}
.footer-address{
font-size: 14px;
margin-bottom: 25px;
line-height: 1.5;
}
.footer-tel{
font-size: 26px;
margin-bottom: 10px;
display: block;
font-family: serif;
}
.footer-tel-memo{
font-size: 12px;
margin-bottom: 25px;
}
.footer-banner-content{
margin-top: 15px;
margin-bottom: 15px;
display: flex;
}
.footer-banner{
display: block;
}
.footer-banner img{
height: 50px;
width: auto;
}
.footer-sns{
display: flex;
align-items: center;
margin-left: 15px;
}
.footer-sns-icon{
align-items: center;
margin: 0 5px;
border-radius: 50%;
box-shadow: 0 4px 16px 0 rgb(0 0 0 / 5%);
}
.footer-sns-icon img{
width: 35px;
height: 35px;
}
.footer-r{
width: 50%;
display: flex;
padding-top: 80px;
}
.footer-nav{
max-width: 40%;
width: 100%;
}
.footer-nav li{
margin-bottom: 10px;
}
.footer-nav li:last-child{
border-right: none;
}
.footer-nav li a{
display: block;
font-size: 15px;
letter-spacing: .04em;
line-height: 1.5;
margin-bottom: 0.8em;
}
.footer-copy{
background-color: #E5E5E5;
color: #444444;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 12px;
}
@media(max-width:1024px){
.footer{

}
.footer-l{
width: calc(50% - 30px);
margin-left: 30px;
}
.footer-logo{

}
.footer-logo img{

}
.footer-address{
font-size: 14px;
margin-bottom: 25px;
line-height: 1.5;
}
.footer-tel{
font-size: 26px;
margin-bottom: 10px;
display: block;
font-family: serif;
}
.footer-tel-memo{
font-size: 12px;
margin-bottom: 25px;
}
.footer-banner-content{
margin-top: 15px;
margin-bottom: 15px;
display: flex;
}
.footer-banner img{
height: 45px;
}
.footer-sns{
margin-left: 12px;
}
.footer-sns-icon img{
width: 30px;
height: 30px;
}
.footer-r{
padding-top: 60px;
}
.footer-nav{
max-width: 45%;
}
.footer-nav li{
margin-bottom: 8px;
}
.footer-nav li a{
font-size: 14px;
letter-spacing: .02em;
margin-bottom: 0.7em;
}
}
@media(max-width:767px){
.footer{
border-top: 3px solid #caa164;
text-align: center;
}
.footer-inner{
display: block;
}
.footer-l{
width: 100%;
margin-left: 0;
}
.footer-logo{

}
.footer-logo img{

}
.footer-address{
font-size: 12px;
margin-bottom: 20px;
}
.footer-tel{
font-size: 22px;
margin-bottom: 10px;
}
.footer-tel-memo{
font-size: 10px;
margin-bottom: 30px;
}
.footer-banner-content{
margin-top: 15px;
margin-bottom: 15px;
display: block;
}
.footer-banner{
display: block;
}
.footer-sns{
display: flex;
align-items: center;
justify-content: center;
margin-left: 0;
margin-top: 15px;
}
.footer-sns-icon{
margin: 0 3px;
}
.footer-nav{
display: none;
}
.footer-r{
display: none;
}
.footer-copy{
color: #444444;
height: 50px;
line-height: 50px;
font-size: 10px;
}
}
/* 固定ページ共通 */
.page-heading{
position: relative;
}
.page-heading:before {
position: absolute;
content: '';
background: #f6f2ea;
max-width: 50%;
width: 100%;
height: 220px;
left: 0;
bottom: -50px;
z-index: -1;
}
.page-heading-inner{
position: relative;
padding-left: 100px;
}
.page-heading-img{
background-size: cover;
background-repeat: no-repeat;
max-width: 1100px;
height: 500px;
margin-right: 0;
margin-left: auto;
}
#about .page-heading-img{
background-image: url(img/02_about/fv.webp);
}
#counselor .page-heading-img{
background-image: url(img/03_counselor/fv.webp);
}
#plan .page-heading-img{
background-image: url(img/04_plan/fv.webp);
}
#flow .page-heading-img{
background-image: url(img/05_flow/fv.webp);
}
#access .page-heading-img{
background-image: url(img/06_access/fv.webp);
}
#faq .page-heading-img{
background-image: url(img/07_faq/fv.webp);
}
#contact .page-heading-img{
background-image: url(img/08_contact/fv.webp);
}
#blog .page-heading-img{
background-image: url(img/09_blog/fv.webp);
}
#news .page-heading-img{
background-image: url(img/10_news/fv.webp);
}
#case .page-heading-img{
background-image: url(img/11_case/fv.webp);
}
.page-heading-title{
background-color: #fff;
width: 440px;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 40px;
position: absolute;
bottom: 60px;
left: 100px;
}
.page-heading-title-sub{
font-size: 40px;
color: #caa164;
margin-bottom: 20px;
letter-spacing: .02em;
}
.page-heading-title-h1{
font-size: 20px;
font-weight: 500;
letter-spacing: .02em;
}
@media(max-width:1024px){
.page-heading:before {
width: 100%;
height: 220px;
bottom: -50px;
}
.page-heading-inner{
padding-left: 100px;
}
.page-heading-img{
max-width: 1100px;
height: 340px;
}
.page-heading-title{
width: 400px;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 30px;
bottom: 20px;
}
.page-heading-title-sub{
font-size: 32px;
margin-bottom: 15px;
}
.page-heading-title-h1{
font-size: 18px;
}        
.page-heading-title{
left: 0;
}
}
@media(max-width:767px){
.page-heading{
position: relative;
}
.page-heading:before {
position: absolute;
max-width: 80%;
width: 100%;
height: 300px;
left: 0;
bottom: auto;
top: 0;
}
.page-heading-inner{
position: inherit;
padding-left: 0;
}
.page-heading-img{
background-size: cover;
background-repeat: no-repeat;
max-width: 95%;
height: 150px;
margin-right: 0;
margin-left: 5%;
}
.page-heading-title{
background-color: #fff;
width: auto;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 5%;
padding-right: 5%;
position: inherit;
bottom: 0;
left: 0;
display: inline-block;
}
.page-heading-title-sub{
font-size: 16px;
margin-bottom: 15px;
}
.page-heading-title-h1{
font-size: 18px;
letter-spacing: .02em;
}
}
/* ぱんくずリスト */
.breadcrumbs{

}
#breadcrumbs{
font-size: 10px;
text-align: right;
margin-right: 30px;
height: 60px;
line-height: 60px;
letter-spacing: .06em;
}
#breadcrumbs a{
font-size: 12px;
}
.breadcrumb_last{
font-size: 12px;
}
.breadcrumbs-blog #breadcrumbs{
font-size: 10px;
text-align: left;
margin-right:0;
padding-left: 30px;
}
@media(max-width:767px){
#breadcrumbs{
font-size: 10px;
text-align: left;
margin-right: 0;
margin-left: 5%;
margin-top: 12px;
height: 30px;
line-height: 30px;
letter-spacing: .04em;
}
#breadcrumbs a{
font-size: 12px;
}
.breadcrumb_last{
font-size: 12px;
}
.breadcrumbs-blog #breadcrumbs{
margin:0;
padding-left: 15px;
}
}
/* コピー */
.copy{
text-align: center;
}
.copy-inner{
padding-top: 150px;
padding-bottom: 100px;
}
.copy-text01{
font-size: 30px;
line-height: 1.6;
margin-bottom: 40px;
letter-spacing: .03em;
}
.copy-text02{
font-size: 16px;
line-height: 2.2;
letter-spacing: .03em;
}
@media(max-width:1024px){
.copy-inner{
padding-top: 120px;
padding-bottom: 80px;
}
.copy-text01{
font-size: 26px;
margin-bottom: 40px;
}
.copy-text02{
font-size: 16px;
line-height: 1.8;
}            
}
@media(max-width:767px){
.copy-inner{
padding-top: 100px;
padding-bottom: 60px;
padding-left: 15px;
padding-right: 15px;
}
.copy-text01{
font-size: 20px;
line-height: 1.6;
margin-bottom: 30px;
letter-spacing: .03em;
}
.copy-text02{
font-size: 14px;
line-height: 1.8;
letter-spacing: .02em;
}
}
/* aboutページ */
/* 私たちの特長 */
.about-feature{

}
.about-feature-inner{

}
.about-feature-title{
text-align: center;
}
.about-feature-list{

}
.about-feature-list li{
position: relative;
margin-bottom: 140px;
}
.about-feature-list li:last-child{
margin-bottom: 40px;
}
.about-feature-list li::before{
position: absolute;
content: '';
background: #f6f2ea;
width: 100%;
height: 280px;
left: 0;
bottom: -40px;
z-index: -1;
}
.about-feature-list li:nth-child(2)::before{
display: none;
}
.about-feature-list-inner{
max-width: 1100px;
margin: auto;
padding-left: 0;
padding-right: 0;
display: flex;
justify-content: center;
}
.about-feature-list-text{
max-width: 500px;
width: 100%;
margin-right: 100px;
}
.about-feature-list-text01{
display: flex;
align-items: center;
margin-bottom: 70px;
}
.about-feature-list-text01 span{
font-size: 60px;
color: #caa164;
font-family: serif;
}
.about-feature-list-text01 h3{
padding-left: 20px;
font-size: 22px;
font-weight: 500;
line-height: 1.4;
}
.about-feature-list-text03{
line-height: 1.7;
}
.about-feature-list-img{
width: 460px;
}
.about-feature-list-img img{
width: 100%;
max-width: 460px;
height: 330px;
object-fit: cover;
}
.reverse{
flex-direction: row-reverse;
}
.reverse .about-feature-list-text{
max-width: 500px;
width: 100%;
margin-right: 0;
margin-left: 100px;
}
.reverse .about-feature-list-text01{
margin-bottom: 40px;
}
@media(max-width:1024px){
.about-feature-list{
margin-top: 30px;
}
.about-feature-list li{
margin-bottom: 100px;
}
.about-feature-list li:last-child{
margin-bottom: 40px;
}
.about-feature-list li::before{
height: 200px;
left: 0;
bottom: -40px;
z-index: -1;
}
.about-feature-list li:nth-child(2)::before{
display: block;
height: 200px;
left: 0;
bottom: -40px;
z-index: -1;
}
.about-feature-list-inner{
max-width: 95%;
}
.about-feature-list-text{
max-width: 370px;
width: 100%;
margin-right: 30px;
}
.about-feature-list-text01{
margin-bottom: 50px;
}
.about-feature-list-text01 span{
font-size: 40px;
letter-spacing: 0;
}
.about-feature-list-text01 h3{
padding-left: 12px;
font-size: 17px;
}
.about-feature-list-img{
max-width: 280px;
width: 100%;
}
.about-feature-list-img img{
width: 100%;
max-width: 100%;
height: 190px;
object-fit: cover;
}
.reverse{
flex-direction: initial;
}
.reverse .about-feature-list-text{
max-width: 370px;
width: 100%;
margin-right: 30px;
margin-left: 0;
}
.reverse .about-feature-list-text01{
margin-bottom: 50px;
}
.about-feature-list-text03{
font-size: 14px;
}
}
@media(max-width:767px){
.about-feature-list li{
position: relative;
margin-bottom: 60px;
}
.about-feature-list li::before,
.about-feature-list li:nth-child(2)::before{
position: absolute;
content: '';
background: #f6f2ea;
width: 100%;
height: 320px;
left: 0;
bottom: -40px;
z-index: -1;
}
.about-feature-list-inner{
max-width: 100%;
margin: auto;
padding-left: 15px;
padding-right: 15px;
display: block;
justify-content: space-between;
}
.about-feature-list-text{
width: 100%;
}
.about-feature-list-text01,
.reverse .about-feature-list-text01{
display: block;
margin-bottom: 15px;
}
.about-feature-list-text01 span{
font-size: 48px;
margin-top: -40px;
margin-bottom: 10px;
margin-left: 10px;
display: block;
}
.about-feature-list-text01 h3{
padding-left: 0;
font-size: 18px;
}
.about-feature-list-text03{
line-height: 1.5;
font-size: 14px;
}
.about-feature-list-img{
width: 100%;
max-width: 100%;
margin-bottom: 15px;
}
.about-feature-list-img img{
width: 100%;
height: auto;
}
}
/* サービス */
.about-service{
background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
background-size: 30px 30px;
background-repeat: repeat;
}
.about-service-inner{
max-width: 1100px;
margin: auto;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 100px;
padding-top: 80px;
}
.about-feature-title{
text-align: center;
}
.about-service-list{
display: flex;
justify-content: space-between;
align-items: initial;
margin-bottom: 60px;
}
.about-service-list li{
width: 31%;
}
.about-service-list-img{
margin-bottom: 30px;
}
.about-service-list-img img{
max-width: 330px;
width: 100%;
height: 260px;
object-fit: cover;
}
.about-service-list-h3{
font-size: 18px;
font-weight: 500;
margin-bottom: 20px;
line-height: 1.4;
}
.about-service-list-text{
font-size: 14px;
line-height: 1.5;
}
@media(max-width:1024px){
.about-service-list{
margin-bottom: 40px;
}
.about-service-list-img{
margin-bottom: 20px;
}
.about-service-list-img img{
max-width: 100%;
height: 220px;
}
.about-service-list-h3{
font-size: 16px;
margin-bottom: 15px;
}
.about-service-list-text{
font-size: 14px;
}        
}
@media(max-width:767px){
.about-service{

}
.about-service-inner{
max-width: 100%;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 60px;
}
.about-service-list{
display: block;
margin-bottom: 30px;
}
.about-service-list li{
width: 100%;
margin-bottom: 50px;
}
.about-service-list-img{
margin-bottom: 20px;
}
.about-service-list-img img{
max-width: 100%;
width: 100%;
height: 280px;
object-fit: cover;
}
.about-service-list-h3{
font-size: 18px;
font-weight: 500;
margin-bottom: 15px;
}
.about-service-list-text{
font-size: 14px;
line-height: 1.5;
}
}
/* counselorページ */
/* ごあいさつ */
.counselor-greeting{
position: relative;
}
.counselor-greeting::before{
position: absolute;
content: '';
background: #f6f2ea;
width: 100%;
height: 360px;
left: 0;
bottom: -40px;
z-index: -1;
}
.counselor-greeting-inner{
max-width: 1100px;
margin: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 100px;
}
.counselor-greeting-title{
text-align: center;
margin-bottom: 100px;
}
.counselor-greeting-content{
display: flex;
justify-content: space-around;
}
.counselor-greeting-l{
margin-right: 30px;
}
.counselor-greeting-l img{
max-width: 350px;
width: 100%;
height: auto;
}
.counselor-greeting-name01{
font-size: 12px;
margin-top: 15px;
margin-bottom: 15px;
}
.counselor-greeting-name02{
font-size: 18px;
}
.counselor-greeting-r{
max-width: 600px;
width: 100%;
}
.counselor-greeting-r h3{
font-size: 24px;
font-weight: 500;
margin-bottom: 50px;
line-height: 1.5;
}
.counselor-greeting-r p{
line-height: 1.7;
}
@media(max-width:1024px){
.counselor-greeting::before{
height: 250px;
bottom: -40px;
}
.counselor-greeting-inner{
max-width: 100%;
padding-top: 80px;
}
.counselor-greeting-title{
margin-bottom: 60px;
}
.counselor-greeting-l{
margin-right: 30px;
}
.counselor-greeting-l img{
max-width: 350px;
width: 100%;
height: auto;
}
.counselor-greeting-name01{
font-size: 12px;
margin-top: 15px;
margin-bottom: 15px;
}
.counselor-greeting-name02{
font-size: 17px;
}
.counselor-greeting-r{
max-width: 550px;
width: 100%;
}
.counselor-greeting-r h3{
font-size: 20px;
margin-bottom: 30px;
}
.counselor-greeting-r p{
line-height: 1.6;
font-size: 15px;
}   
}
@media(max-width:767px){
.counselor-greeting::before{
height: 600px;
bottom: -30px;
}
.counselor-greeting-inner{
max-width: 100%;
padding-top: 100px;
}
.counselor-greeting-title{
margin-bottom: 30px;
}
.counselor-greeting-content{
display: block;
}
.counselor-greeting-l{
margin: auto;
}
.counselor-greeting-l img{
max-width: 100%;
width: 90%;
margin: 0 5%;
height: auto;
}
.counselor-greeting-name01{
font-size: 12px;
margin-top: 20px;
margin-bottom: 10px;
text-align: center;
}
.counselor-greeting-name02{
font-size: 18px;
text-align: center;
margin-bottom: 30px;
}
.counselor-greeting-r{
max-width: 100%;
width: 100%;
}
.counselor-greeting-r h3{
    font-size: 15px;
    margin-bottom: 12px;
}
.counselor-greeting-r p{
font-size: 14px;
line-height: 1.7;
}
}
/* 経歴 */
.flow{
position: relative;
}
.flow-inner{
max-width: 1100px;
margin: auto;
padding-top: 150px;
padding-left: 15px;
padding-right: 350px;
padding-bottom: 100px;
}
.flow-tate{
font-size: 48px;
line-height: 1.6;
letter-spacing: -3px;
white-space: nowrap;
position: absolute;
top: 10%;
left: 68%;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
.flow-tate span{
display: inline-block;
color: #caa164;
}
.flow-content{
position: relative;
}
.flow-item{
width: 100%;
margin: 40px 0 0;
display: flex;
}
.flow-item>div:nth-child(1),
.flow-item>div:nth-child(2) {
width: 12%;
}
.flow-item>div:nth-child(3) {
width: 76%;
}
.flow-item>div:nth-child(1) p {
font-size: 24px;
line-height: 24px;
letter-spacing: 1px;
color: #caa164;
margin: -2px 0 0;
}
.flow-item>div:nth-child(2) span {
display: block;
width: 7px;
height: 7px;
border-radius: 50%;
margin: 10px auto 0;
background: #caa164;
}
.flow-item-text01 {
font-size: 20px;
line-height: 1.5;
letter-spacing: .02em;
color: #caa164;
font-weight: 500;
margin: 0 0 10px;
}
.flow-item-text02{
font-size: 16px;
line-height: 1.5;
letter-spacing: .02em;
text-align: justify;
}
.flow-border {
width: 10%;
height: 97%;
position: absolute;
top: 0;
left: 13%;
padding: 15px 0 50px;
}
.flow-border span {
display: block;
width: 1px;
height: 92.5%;
margin: 0 auto;
background: #caa164;
}
.flow-line{
display: none;
}
@media(max-width:1024px){
.flow-inner{
max-width: 1100px;
margin: auto;
padding-right: 230px;
padding-left: 30px;
}
.flow-tate{
font-size: 36px;
left: 75%;
}
.flow-item>div:nth-child(1) p {
font-size: 18px;
}
.flow-item-text01 {
font-size: 18px;
}
.flow-item-text02{
font-size: 15px;
}    
.flow-border span {
height: 92%;
}
}
@media(max-width:767px){
.flow-inner{
max-width: 100%;
margin: auto;
padding-top: 80px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 60px;
}
.flow-tate{
margin:0 0 45px 0;
font-size: 24px;
line-height: 1.6;
left: .02em;
position: inherit;
top: auto;
right: auto;
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: horizontal-tb;
writing-mode: horizontal-tb;
font-feature-settings: "palt";
white-space: nowrap;
}
.flow-tate span{
font-weight: 500;
}
.flow-content{
position: relative;
}
.flow-item{
margin: 0;
display: block;
}
.flow-item>div:nth-child(1),
.flow-item>div:nth-child(2) {
width: 100%;
}
.flow-item>div:nth-child(3) {
width: 100%;
}
.flow-item>div:nth-child(1) p {
font-size: 16px;
line-height: 1.5;
margin: 0 0 10px 0;
}
.flow-item>div:nth-child(2) span {
display: none;
}
.flow-item-text01 {
font-size: 16px;
margin: 0 0 10px;
}
.flow-item-text02{
font-size: 13px;
letter-spacing: .5px;
text-align: justify;
}
.flow-border {
display: none;
}
.flow-line{
display: block;
width: 1px;
height: 40px;
background: #caa164;
margin: 20px 0 20px 30px;
}
}
/* planページ */
/* 料金プラン */
.plan-plan .plan__box{
padding-bottom: 120px;
}
.plan-plan .plan__cell {
width: 20%;
}
@media(max-width:1024px){
.plan-plan .plan__box{
padding: 120px 35px;
}
}
@media(max-width:767px){
.plan-plan .plan__box{
padding: 40px 0 60px;
}
}
.plan-support-title{
text-align: center;
}
/* オプション */
.plan-option{

}
.plan-option-inner{
max-width: 1100px;
margin: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 100px;
padding-bottom: 60px;
}
.plan-option-title{
text-align: center;
}
/* パソコン用の料金プラン */
.option__table {
width: 100%;
border-collapse: collapse;
padding: 0 50px;
}
.option__row {
border-bottom: 0.5px solid #8e8e8e;
height: 75px;
}
.option__row--header {
height: 75px;
}
.option__title{
vertical-align: middle;
}
.option__data01{
font-size: 18px;
vertical-align: middle;
width: 25%;
text-align: center;
font-family: serif;
}
.option__data01 span{
font-size: 15px;
}
.option__data02{
font-size: 16px;
vertical-align: middle;
width: 50%;
text-align: left;
line-height: 1.3;
}
@media(max-width:767px){
.plan-option-inner{
max-width: 100%;
margin: auto;
padding-left: 0;
padding-right: 0;
padding-top: 60px;
padding-bottom: 30px;
}
.option__table {
padding: 0 30px;
}
.option__row {
border-bottom: 1px solid #8e8e8e;
height: 70px;
}
.option__row--header {
height: 60px;
}
.option__title{
vertical-align: middle;
font-size: 13px;
}
.option__data01{
font-size: 13px;
width: 25%;
line-height: 1.3;
}
.option__data01 span{
font-size: 12.5px;
}
.option__data02{
font-size: 13px;
line-height: 1.3;
padding: 8px 0;
}
}
/* 料金その他 */
.plan-others{
/* background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
background-size: 30px 30px;
background-repeat: repeat; */
}
.plan-others .inner{
display: flex;
padding-top: 80px;
padding-bottom: 50px;
max-width: 1200px;
margin: auto;
flex-wrap: wrap;
}
.plan-member{
width: 40%;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 60px;
}
.plan-others-list{

}
.plan-others-list li{
margin-bottom: 1em;
font-size: 16px;
padding-left: 30px;
background: url(img/00_common/list-icon.svg) left 0px top 5px no-repeat;
background-size: 15px auto;
line-height: 1.5;
}
.plan-document{
width: 40%;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 60px;
}
@media(max-width:767px){
.plan-others{

}
.plan-others .inner{
display: block;
padding-top: 40px;
padding-bottom: 30px;
max-width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.plan-member{
width: 100%;
margin-left: 0;
margin-right: 0;
margin-bottom: 60px;
}
.plan-others-list li{
margin-bottom: 15px;
font-size: 14px;
padding-left: 30px;
background: url(img/00_common/list-icon.svg) left 0px top 5px no-repeat;
background-size: 15px auto;
line-height: 1.5;
}
.plan-document{
width: 100%;
margin-left: 0;
margin-right: 0;
}
}


/* accessページ */
/* オフィスのご案内 */
.access-office{

}
.access-office-inner{
max-width: 1100px;
margin: auto;
padding-top: 100px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 100px;
}
.access-office-title{
text-align: center;
}
.access-office-content{
display: flex;
flex-wrap: wrap;
}
.access-office-content-l{
width: 55%;
}
.access-office-dl{
display: flex;
flex-wrap: wrap;
align-items: center;
}
.access-office-dl dt{
font-size: 16px;
color: #caa164;
width: 35%;
display: flex;
margin-right: 5%;
margin-bottom: 25px;
align-items: center;
}
.access-office-dl dt span{
flex: 1;
height: 1px;
margin: 0 auto;
background: #caa164;
margin-left: 15px;
}
.access-office-dl dd{
font-size: 15px;
width: 60%;
line-height: 1.5;
margin-bottom: 25px;
}
.access-office-content-r{
width: 45%;
}
.office-map{
width: 100%;
height: 100%;
}
.access-access-content{
display: flex;
justify-content: space-between;
margin-top: 100px;
margin-bottom: 60px;
}
.access-access-content-l{
width: 48%;
background-color: #f6f2ea;
padding: 50px 50px 35px 50px;
}
.access-access-content-l h3{
font-size: 20px;
font-weight: 500;
color: #caa164;
margin-bottom: 30px;
}
.access-access-content-l p{
line-height: 1.5;
padding-bottom: 1em;
}
.access-access-content-r{
width: 48%;
background-color: #f6f2ea;
padding: 50px 50px 40px 50px;
}
.access-access-content-r h3{
font-size: 20px;
font-weight: 500;
color: #caa164;
margin-bottom: 30px;
}
.access-access-content-r p{
line-height: 1.5;
padding-bottom: 1em;
}
@media(max-width:1024px){
.access-access-content{
margin-top: 40px;
margin-bottom: 10px;
}
.access-access-content-l{
padding: 40px 25px 20px 25px;
}
.access-access-content-l h3{
font-size: 18px;
margin-bottom: 25px;
}
.access-access-content-l p{
font-size: 15px;
}
.access-access-content-r{
padding: 40px 25px 20px 25px;
}
.access-access-content-r h3{
font-size: 18px;
margin-bottom: 25px;
}
.access-access-content-r p{
font-size: 15px;
}        
}
@media(max-width:767px){
.access-office-inner{
max-width: 100%;
padding-top: 60px;
padding-bottom: 60px;
}
.access-office-content{
display: block;
}
.access-office-content-l{
width: 100%;
}
.access-office-dl dt{
font-size: 14px;
margin-bottom: 20px;
}
.access-office-dl dt span{
margin-left: 10px;
}
.access-office-dl dd{
font-size: 12px;
margin-bottom: 20px;
}
.access-office-content-r{
width: 100%;
}
.office-map{
height: 300px;
}
.access-access-content{
display: block;
margin-top: 60px;
margin-bottom: 30px;
}
.access-access-content-l{
width: 100%;
padding: 40px 30px 20px 30px;
margin-bottom: 30px;
}
.access-access-content-l h3{
font-size: 18px;
margin-bottom: 25px;
}
.access-access-content-l p{
font-size: 14px;
}
.access-access-content-r{
width: 100%;
padding: 40px 30px 20px 30px;
}
.access-access-content-r h3{
font-size: 18px;
margin-bottom: 25px;
}
.access-access-content-r p{
font-size: 14px;
}
}
/* 結婚相談所について */
.access-company{

}
.access-company-inner{
max-width: 800px;
margin: auto;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 100px;
padding-top: 120px;
}
.table1 table {
width: 100%;
border-top: solid 1px #444444;
border-collapse: separate;
border-spacing: 0 10px;
line-height: 1.5;
font-size: 15px;
}
.table1 table tr th {
width: 20%;
height: auto;
border-right: solid 1px #444444;
margin: 0;
padding: 10px 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
}
.table1 table tr .data {
width: 80%;
height: auto;
padding: 0;
margin: 0;
border: 0;
text-align: left;
padding: 10px 20px;
vertical-align: middle;
overflow: hidden;
}
.table1 table tr .bar {
height: 1px;
width: 100%;
border-top: solid 1px #444444;
vertical-align: middle;
}
@media(max-width:767px){
.access-company-inner{
max-width: 100%;
padding-bottom: 60px;
padding-left: 5px;
padding-right: 5px;
margin: auto;
padding-top: 80px;
}
.table1 table {
font-size: 12px;
}
.table1 table tr th {
width: 25%;
}
.table1 table tr .data {
width: 75%;
padding: 10px 10px;
}
}
/* faqページ */
.faq{
background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
background-size: 30px 30px;
background-repeat: repeat;
}
.faq-inner{
max-width: 800px;
margin: auto;
padding-top: 100px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 60px;
}
/* よくある質問のアコーディオン */
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_qa .cp_actab {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 0 1em 0;
color: #caa164;
}
.cp_qa .cp_actab input {
position: absolute;
opacity: 0;
}
/* 質問 */
.cp_qa .cp_actab label {
font-weight: 500;
line-height: 1.6em;
position: relative;
display: block;
margin: 0 0 0 0;
padding: 1em 2em 1em 2.5em;
cursor: pointer;
text-indent: 1em;
background:#f6f2ea;
font-size: 20px;
}
.cp_qa .cp_actab label::before {
font-size: 1.8em;
margin-left: -1em;
padding-right: 1em;
content: 'Q';
}
.cp_qa .cp_actab label:hover {
transition: all 0.3s;
color: #caa164;
}
/* --質問の＋アイコン */
.cp_qa .cp_actab label::after {
font-size: 1.7em;
font-weight: 500;
line-height: 2em;
position: absolute;
top: 0;
right: 0;
content: '\2b';
display: inline-block;
width: 2em;
height: 2em;
-webkit-transition: transform 0.4s;
transition: transform 0.4s;
}
/* 答え */
.cp_qa .cp_actab .cp_actab-content {
position: relative;
overflow: hidden;
max-height: 0;
padding: 0 0 0 2.5em;
-webkit-transition: max-height 0.2s;
transition: max-height 0.2s;
border-radius: 0 0 0.5em 0.5em;
background-color: #fff;
}
.cp_qa .cp_actab .cp_actab-content::before {
font-size: 1.5em;
position: absolute;
margin: 0.4em 0 0 -1em;
padding: 0;
content: 'A';
}
.cp_qa .cp_actab .cp_actab-content p {
margin: 1em 1em 1em 1em;
line-height: 1.5;
color: #444444;
}
.cp_qa .cp_actab .cp_actab-content a {
    color: #1e73be;
    text-decoration: underline;
    word-wrap: break-word;
}
/* 質問を開いた時の仕様 */
/* --答えの高さ */
.cp_qa .cp_actab input:checked ~ .cp_actab-content {
max-height: 40em;
border: 10px solid #f6f2ea;
}
/* 質問をクリックした時のアイコンの動き */
.cp_qa .cp_actab input:checked ~ label {
color: #caa164;
border-radius: 0.5em 0.5em 0 0;
}
/* 質問をクリックした時の+の動き */
.cp_qa .cp_actab input[type=checkbox]:checked + label::after {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
@media(max-width:767px){
.faq{

}
.faq-inner{
max-width: 100%;
padding-top: 60px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 60px;
}
.cp_qa .cp_actab label {
font-size: 15px;
padding: 1em 2.2em 1em 2.2em;
}
.cp_qa .cp_actab label::before {
font-size: 1.2em;
margin-left: -2em;
padding-right: .3em;
}
.cp_qa .cp_actab .cp_actab-content p {
font-size: 14px;
}
}
/* 投稿ページ共通 */
.content{

}
.content-inner{
max-width: 900px;
padding-top: 80px;
padding-right: 15px;
padding-left: 15px;
padding-bottom: 60px;
margin: 0 auto;
}
.main{
flex: 1;
/* padding-right: 30px; */
}
@media(max-width:1024px){
.content-inner{
display: block;
max-width: 100%;
padding-top: 60px;
padding-right: 15px;
padding-left: 15px;
padding-bottom: 30px;
}
.main{
width: 100%;
padding-right: 0;
}
}
@media(max-width:767px){
.content-inner{
padding-top: 30px;
padding-bottom: 30px;
}
}
/* ページネーション */
.pagination ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 60px;
}
.pagination li {
font-size: 16px;
border: 1px solid #444444;
height: 45px;
line-height: 45px;
width: 45px;
margin-right: 5px;
margin-left: 5px;
text-align: center;
}
.pagination li.active {
background-color: #caa164;
color: #fff;
border: 1px solid #fff;
}
.pagination ul a{
display: block;
}
.pagination ul a:hover{
opacity: .7;
}
/* サイドバー */
.aside{
width: 330px;
border-left: 1px solid #d6d6d6;
padding-left: 30px;
}
@media(max-width:1024px){
.aside{
width: 100%;
border-left: none;
padding-left: 0;
margin-top: 60px;
}
}
@media(max-width:767px){
.aside{
margin-top: 50px;
}
}
/* よく読まれている記事 */
.popular-article{
margin-top: 30px;
margin-bottom: 30px;
}
.popular-article-title{
font-size: 20px;
font-weight: 500;
padding-bottom: 15px;
border-bottom: 1px solid #caa164;
line-height: 1.5;
}
.popular-article-content{
margin-top: 15px;
}
.popular-article-item{
margin-bottom: 30px;
}
.popular-article-img{
margin-bottom: 15px;
}
.popular-article-img img{
width: 300px;
height: 200px;
object-fit: cover;
}
.popular-article-data{
font-size: 14px;
margin-bottom: 10px;
}
.popular-article-text{
font-size: 16px;
color: #caa164;
line-height: 1.5;
}
@media(max-width:1024px){
.popular-article-content{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.popular-article-item{
width: 48%;
}
.popular-article-img{
margin-bottom: 15px;
}
.popular-article-img img{
width: 100%;
height: auto;
}
.popular-article-data{
font-size: 14px;
margin-bottom: 15px;
}
.popular-article-text{
font-size: 18px;
color: #caa164;;
}
}
@media(max-width:767px){
.popular-article{
margin-bottom: 10px;
}
.popular-article-title{
font-size: 18px;
padding-bottom: 10px;
}
.popular-article-img{
margin-bottom: 10px;
}
.popular-article-img img{
width: 100%;
height: 120px;
object-fit: cover;
}
.popular-article-data{
font-size: 12px;
margin-bottom: 10px;
}
.popular-article-text{
font-size: 13px;
letter-spacing: 0;
line-height: 1.3;
}
}
/* 新着記事一覧 */
.blog-list{
padding-top: 30px;
}
.blog-item{
margin-bottom: 20px;
border-bottom: solid 1px #d6d6d6;
}
.blog-item a{
display: flex;
}
.blog-img{
width: 300px;
}
.blog-img img{
width: 300px;
height: 200px;
object-fit: cover;
}
.blog-item-text{
background-color: #fff;
padding: 25px 30px;
flex: 1;
}
.blog-item-text-sub{
margin-bottom: 20px;
display: flex;
align-items: center;
}
.blog-item-data{
font-size: 15px;
margin-right: 20px;
}
.blog-item-category{
background-color: #caa164;
color: #fff;
padding: 5px 10px;
border-radius: 50px;
font-size: 12px;
}
.blog-item-title{
font-size: 18px;
line-height: 1.6;
}
@media(max-width:767px){
.blog-list{
padding-top: 15px;
}
.blog-item{
margin-bottom: 10px;
}
.blog-item a{
display: block;
}
.blog-img{
width: 100%;
}
.blog-img img{
width: 100%;
height: 280px;
object-fit: cover;
}
.blog-item-text{
padding: 15px 5px;
}
.blog-item-text-sub{
margin-bottom: 15px;
}
.blog-item-data{
font-size: 13px;
margin-right: 10px;
}
.blog-item-category{
padding: 4px 7px;
font-size: 11px;
}
.blog-item-title{
font-size: 15px;
line-height: 1.4;
letter-spacing: 0;
}
}
/* 記事 */
.article-main{
max-width: 800px;
width: 100%;
margin: 0 auto;
}
.article-info{
display: flex;
align-items: center;
margin-bottom: 20px;
}
.article-category{
display: block;
background-color: #caa164;
color: #fff;
padding: 6px 10px;
border-radius: 100px;
font-size: 12px;
}
.article-data{
color: #939393;
padding-left: 15px;
}
.article-title{
font-size: 26px;
letter-spacing: .02em;
font-weight: 500;
margin-bottom: 20px;
line-height: 1.5;
}
.article-img{

}
.article-img img{
width: 100%;
height: 450px;
object-fit: cover;
}
@media(max-width:767px){
.article-info{
margin-bottom: 15px;
}
.article-category{
padding: 5px 8px;
font-size: 12px;
}
.article-data{
padding-left: 10px;
}
.article-title{
font-size: 18px;
margin-bottom: 15px;
}
.article-img img{
height: 260px;
}
}
/* 本文 */
.article-content{
padding: 30px 0;
}
.article-content h2 {
width: 100%;
padding: 20px;
background-color: #323232;
color: #fff;
border-radius: 3px;
font-size: 18px;
line-height: 1.4;
font-weight: 500;
margin-top: 40px;
margin-bottom: 15px;
}
.article-content h2 span{
color: #fff;
letter-spacing: .03em;
line-height: 1.5;
}
.article-content h3 {
font-size: 18px;
border: none;
border-bottom: 1px solid #454545;
padding: 10px 3px;
margin: 30px 0 25px;
font-weight: 500;
line-height: 1.3;
}
.article-content h3 span{
letter-spacing: .03em;
line-height: 1.5;
}
.article-content h4 {
font-size: 16px;
border-left: 4px solid #454545!important;
padding: 0.6em 0.3em 0.6em 0.8em;
margin-top: 25px;
margin-bottom: 30px;
font-weight: 500;
line-height: 1.5;
}
.article-content h4 span{
letter-spacing: .03em;
line-height: 1.5;
}
.article-content p {
margin: 0 0 30px;
padding: 0;
font-size: 16px;
line-height: 1.7;
word-wrap: break-word;
letter-spacing: .03em;
}
.article-content a {
color: #1e73be;
text-decoration: underline;
word-wrap: break-word;
}
.article-content a:hover {
color: #caa164;
}
.article-content ul {
margin-bottom: 46px;
line-height: 1.56;
list-style: disc outside;
margin: 0 0 35px 15px;
padding: 0;
}
.article-content li {
font-size: 16px;
line-height: 1.8;
font-size: 16px;
position:relative;
padding: 0 0 5px 20px;
}
.article-content li:before{
counter-increment: list;
content: "";
display: block;
position: absolute;
left: 0px;
height: 7px;
width: 7px;
border-radius: 50%;
background: #454545;
top: .8em;
}
.article-content ol {
counter-reset: number;
margin: 0 0 2em 0;
}
.article-content ol li {
position: relative;
font-size: 16px;
padding-left: 1.35em;
list-style-type:none;
}
.article-content ol>li {
padding-left: 1.9em;
line-height: 1.8;
}
.article-content ol>li:before {
counter-increment: number;
content: counter(number);
width: 1.8em;
height: 1.8em;
line-height: 1.8em;
font-weight: 500;
display: block;
text-align: center;
border-radius: 50%;
position: absolute;
-webkit-transform: scale(.7);
transform: scale(.7);
left: 1px;
top: 0;
background-color: #323232;
border-color: #323232;
color: #fff;
}
@media(max-width:767px){
.article-content{
padding: 20px 0;
}
.article-content h2 {
font-size: 16px;
line-height: 1.5;
padding: 12px 15px;
margin-bottom: 10px;
letter-spacing: .01em;
margin-top: 30px;
}
.article-content h3 {
font-size: 16px;
line-height: 1.45;
padding: 10px 0;
margin-bottom: 25px;
margin-top: 30px;
}
.article-content h4 {
font-size: 16px;
}
.article-content p {
font-size: 14px;
line-height: 1.6;
margin-bottom: 40px;
}
.article-content ul {
margin-bottom: 46px;
margin-left: 5px;
line-height: 1.56;
}
.article-content li {
font-size: 15px!important;
padding: 0 0 5px 18px;
}
.article-content .box-txt{
padding: 1.5em 1.2em 1.5em 1.5em;
font-size: 13px;
}
.article-content .box-txt a{
font-size: 11px;
}
.wp-caption{
margin-right: auto;
margin-left: auto;
}
}
/* contactページ */
/* Lステップ・LINE公式アカウント */
.contact-line{
background-color: #f6f2ea;
}
.contact-line-inner{
max-width: 900px;
margin: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 60px;
padding-bottom: 60px;
}
.contact-line-title{
text-align: center;
}
.contact-line-content{
background-color: #fff;
padding-top: 60px;
padding-bottom: 30px;
text-align: center;
}
.contact-line-text{
font-size: 15px;
line-height: 1.9;
}
.contact-line-btn{
text-align: center;
margin-top: 24px;
}
.contact-line-btn a{
font-size: 18px;
background-color: #4cc764;
-webkit-box-shadow: 0px 3px 6px #00000029;
box-shadow: 0px 3px 6px #00000029;
border-radius: 100px;
position: relative;
color: #fff;
height: 70px;
line-height: 70px;
width: 340px;
display: block;
margin: auto;
padding-left: 30px;
letter-spacing: .02em;
font-weight: 500;
}
.contact-line-btn a::before{
content: '';
background-image: url("./img/08_contact/icon-line.webp");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 50%;
left: 10px;
width: 70px;
height: 70px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s ease 0.1s;
transition: all 0.5s ease 0.1s;
}
.contact-line-memo{
font-size: 14px;
line-height: 2;
margin-top: 15px;
}
@media(max-width:767px){
.contact-line-inner{
max-width: 100%;
padding-top: 60px;
padding-bottom: 30px;
}
.contact-line-title{
text-align: center;
}
.contact-line-content{
padding-top: 30px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
}
.contact-line-text{
font-size: 14px;
line-height: 1.9;
}
.contact-line-btn{
margin-top: 20px;
}
.contact-line-btn a{
font-size: 16px;
height: 60px;
line-height: 60px;
width: 90%;
margin-right: 5%;
margin-left: 5%;
padding-left: 15px;
}
.contact-line-btn a::before{
left: 10px;
width: 60px;
height: 60px;
}
.contact-line-memo{
font-size: 13px;
line-height: 2;
margin-top: 15px;
}
}
/* 電話 */
.contact-tel{
padding-top: 100px;
padding-bottom: 100px;
padding-left: 15px;
padding-right: 15px;
}
.contact-tel-inner{
max-width: 800px;
padding: 30px 0;
margin: auto;
border: 1px solid #caa164;
}
.contact-tel-box{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
margin-bottom: 15px;
}
.contact-tel-text{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.contact-tel-mark{
font-size: 16px;
padding: 7px 10px;
margin-left: 20px;
margin-right: 20px;
font-weight: 500;
color: #fff;
text-align: center;
line-height: 1.3;
letter-spacing: .15em;
background-color: #caa164;
border-radius: 3px;
}
.contact-tel-title{
font-size: 18px;
text-align: center;
}
.contact-tel-tel{
display: block;
font-size: 42px;
font-weight: 500;
text-align: center;
line-height: 1.5;
letter-spacing: .02em;
font-family: serif;
}
.contact-tel-hours{
text-align: center;
}
.contact-tel-hours01{
display: inline-block;
font-size: 12px;
text-align: center;
line-height: 1.4;
letter-spacing: 0px;
background-color: #e2e2e1;
border-radius: 27px;
padding: 1px 18px;
font-size: 14px;
padding: 3px 18px;
}
.contact-tel-hours02{
display: inline-block;
font-size: 14px;
text-align: center;
line-height: 1.9;
letter-spacing: 0px;
font-size: 18px;
line-height: 2.1;
margin-left: 7px;
}
@media(max-width:767px){
.contact-tel{
padding-top: 40px;
padding-bottom: 30px;
}
.contact-tel-inner{
max-width: 100%;
padding: 20px 15px;
}
.contact-tel-box{
display: block;
margin-bottom: 5px;
}
.contact-tel-text{
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
justify-content: center;
}
.contact-tel-mark{
font-size: 14px;
padding: 6px 8px;
margin-left: 0;
margin-right: 15px;
line-height: 1.3;
}
.contact-tel-title{
font-size: 15px;
}
.contact-tel-tel{
font-size: 38px;
}
.contact-tel-hours01{
font-size: 12px;
line-height: 1.4;
letter-spacing: 0px;
border-radius: 27px;
padding: 1px 18px;
font-size: 13px;
padding: 3px 18px;
}
.contact-tel-hours02{
font-size: 14px;
line-height: 1.9;
font-size: 16px;
line-height: 2.1;
margin-left: 7px;
}
}
/* MW WP Form */
.contact-form{

}
.contact-form-inner{
max-width: 800px;
margin: auto;
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
padding-bottom: 100px;
}
.contact-form-title{
text-align: center;
}
.contact-form__required {
display: inline-block;
color: #FFF;
text-align: left;
line-height: 1.6;
letter-spacing: 0.3px;
background-color: #caa164;
margin-left: 14px;
font-size: 14px;
padding: 2px 7px 2px 7px;
margin-left: 17px;
}
.contact-form__item {
border-bottom: 1px solid #dbdbdb;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding: 10px 0;
}
.contact-form__title {
position: relative;
color: #444444;
text-align: left;
line-height: 1.8;
letter-spacing: 0.5px;
width: 35%;
max-width: 300px;
font-size: 16px;
padding: 7px 0;
}
.contact-form__data {
width: 65%;
max-width: 700px;
height: auto;
}
.contact-form__name,
.contact-form__email,
.contact-form__tel,
.contact-form__postal-code,
.contact-form__prefectures,
.contact-form__address,
.contact-form__message {
width: 100%;
text-align: left;
line-height: 1.8;
letter-spacing: 0.5px;
background-color: #FFF;
border: 1px solid #caa164;
border-radius: 3px;
padding: 2px 10px;
height: 45px;
font-size: 16px;
}
.contact-form__name:focus,
.contact-form__email:focus,
.contact-form__tel:focus,
.contact-form__postal-code:focus,
.contact-form__prefectures:focus,
.contact-form__address:focus,
.contact-form__message:focus {
outline: 0;
}
.contact-form__name,
.contact-form__tel {
max-width: 100%;
}
.contact-form__postal-code {
width: 51%;
max-width: 322px;
}
.contact-form__prefectures {
width: 134px;
margin-left: 18px;
}
.contact-form__message {
height: 133px;
}
.contact-form__radio-wrapper {
padding: 12px 0 4px 0;
}
.contact-form__radio-wrapper {
padding: 12px 0 4px 0;
}
input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: none;
}
.mw_wp_form_confirm .contact-form__radio-wrapper {
margin-left: -97px;
padding: 0;
}
.mw_wp_form_confirm .contact-form__data {
padding: 0 0 7px 0;
line-height: 1.8;
}
.mw_wp_form_confirm .contact-form__data {
padding: 7px 0;
}
.contact-form__radio-wrapper label {
display: block;
position: relative;
text-align: left;
font-size: 16px;
line-height: 1.3;
letter-spacing: 0.2px;
padding-left: 41px;
margin-top: -17px;
margin-bottom: 15px!important;
}
.contact-form__radio + span::before {
content: '';
display: inline-block;
position: absolute;
background-color: #FFF;
border: 1px solid #707070;
border-radius: 50%;
margin-right: 7px;
-webkit-transition: all 0.12s, border-color 0.08s;
transition: all 0.12s, border-color 0.08s;
top: 0;
left: 0;
width: 18px;
height: 18px;
}
.contact-form__radio:checked + span::after {
content: '';
display: inline-block;
position: absolute;
border-radius: 50%;
background-color: #caa164;
vertical-align: middle;
-webkit-transition: all 0.12s, border-color 0.08s;
transition: all 0.12s, border-color 0.08s;
top: 4px;
left: 4px;
width: 12px;
height: 12px;
}
input + span.error {
margin-top: 10px;
}
.contact-form__button-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 30px;
}
.contact-form__button-confirm {
padding: 20px 100px;
background-color: #caa164;
color: #fff;
cursor: pointer;
letter-spacing: .03em;
}
.contact-form__button-back {
padding: 0;
background-color: #caa164;
height: 55px;
line-height: 55px;
width: 265px;
color: #fff;
font-size: 15px;
box-shadow: 0 4px 16px 0 rgb(0 0 0 / 15%);
}
.contact-form__button-submit {
padding: 0;
background-color: #caa164;
height: 55px;
line-height: 55px;
width: 265px;
color: #fff;
font-size: 15px;
box-shadow: 0 4px 16px 0 rgb(0 0 0 / 15%);
}
.contact-form__thanks-message {
font-size: 18px;
margin-top: 110px;
padding: 30px 0 100px;
text-align: center;
line-height: 1.8;
font-weight: 500;
}
.mwform-radio-field-text{
letter-spacing: .05em;
}
/* 確認画面 */
.contact-confirm{
max-width: 900px;
margin: auto;
padding-top: 100px;
padding-bottom: 60px;
}
@media(max-width:767px){
.contact-form-inner{
max-width: 100%;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 60px;
}
.contact-form__item{
display: block;
}
.contact-form__title{
width: 100%;
font-size: 15px;
}
.contact-form__data{
width: 100%;
}
.contact-form__required {
line-height: 1.5;
margin-left: 10px;
font-size: 13px;
padding: 2px 6px 2px 6px;
}
.mwform-radio-field-text{
font-size: 15px;
}
.contact-form__radio-wrapper label{
margin-bottom: 10px!important;
}
}
/*　画像の拡大 https://coco-factory.jp/ugokuweb/move02/7-1/　*/
.zoomIn img{
transform: scale(1);
transition: .3s ease-in-out;
}
.zoomIn a:hover img{
transform: scale(1.2);
}
.mask{
display: block;
line-height: 0;
overflow: hidden;
}
/*========= 流れるテキスト https://coco-factory.jp/ugokuweb/move02/8-2/ ===============*/
.slide-in {
overflow: hidden;
display: inline-block;
}
.slide-in_inner {
display: inline-block;
}
.leftAnime{
opacity: 0;/*事前に透過0にして消しておく*/
}
.slideAnimeLeftRight {
animation-name:slideTextX100;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes slideTextX100 {
from {
transform: translateX(-100%); /*要素を左の枠外に移動*/
opacity: 0;
}
to {
transform: translateX(0);/*要素を元の位置に移動*/
opacity: 1;
}
}
.slideAnimeRightLeft {
animation-name:slideTextX-100;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes slideTextX-100 {
from {
transform: translateX(100%);/*要素を右の枠外に移動*/
opacity: 0;
}
to {
transform: translateX(0);/*要素を元の位置に移動*/
opacity: 1;
}
}
/* 流れるテキストおわり */
/* 404ページ */
.page-404{
height: 600px;
width: 100%;
position: relative;
}
.page-404 .inner{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
text-align: center;
}
.page-404 h1{
font-size: 32px;
color: #caa164;
margin-bottom: 30px;
}
.page-404 p{
margin-bottom: 30px;
}
.page-404 .btn{
margin: auto;
padding: 0;
}

/* 本文の表 */
.article-content table th,
.article-content table td{
border: solid 1px #d3d3d3;
padding: 20px 10px 20px 10px;
font-size: 14px;
vertical-align: middle;
line-height: 1.4;
}
@media(max-width:767px){
.article-content table th,
.article-content table td{
padding: 10px 3px 10px 3px;
font-size: 12px;
}
}

iframe{
border:none!important;
}

/* フェードアップ */
.fadeup.is-animated {
-webkit-animation: fadeup 1.5s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
animation: fadeup 1.5s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
.fadeup {
opacity: 0;
}

@-webkit-keyframes fadeup {
0% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}

@keyframes fadeup {
0% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
/*==================================================
スライダーhttps://coco-factory.jp/ugokuweb/move01/6-1-8/
===================================*/
.slick-slider{

}
.slider img {
width:100%;/*スライダー内の画像を横幅100%に*/
height:auto;
max-width: 300px;
}
.slider .slick-slide {
margin:60px 0 0 0;
}
.slider-text{
text-align: center;
font-size: 90px;
color: #E5E4E3;
letter-spacing: .02em;
margin-bottom: -40px;
}
@media screen and (max-width: 1024px) {
.slider img {
max-width: 100px;
}
.slider .slick-slide {
width: 100px!important;
/* height: 100px!important; */
}
.slider-text{
font-size: 70px;
margin-bottom: -40px;
}        
}
@media screen and (max-width: 767px) {
.slider img {
max-width: 100px;
}
.slider .slick-slide {
width: 100px!important;
/* height: 100px!important; */
}
.slider-text{
font-size: 40px;
margin-bottom: -50px;
}
}
/* 動画 */
.youtube{
padding-top: 25%;
height: 0;
position: relative;
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
.youtube iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
@media(max-width:1024px){
.youtube{
padding-top: 40%;
max-width: 550px;
} 
}
@media(max-width:599px){
.youtube{
padding-top: 56%;
max-width: 340px;
} 
}