/* Theme Name: ハピネス保育園 v2 Theme URI: https://happiness-hoikuen.jp/ Description: Happiness SITE THEME Author: HHH Version: 2.0 Tags: */ @charset "utf-8"; /* Happiness */ * {box-sizing:border-box;} html {} body {font-size:100%; line-height:1; text-align:center; color:#634129; font-family:'Lato','Noto Sans JP',sans-serif;} img, a img {max-width:100%; border:none; vertical-align:bottom;} h1, h2, h3 {} a {opacity:1; text-decoration:none; transition:opacity 0.2s;} a:link, a:visited {color:#634229; text-decoration:none;} /* a:hover {opacity:0.7;} */ .l-container {} .l-header {} .l-header__wrap {} .l-bnr {} .l-footer {position:relative; width:100%; margin:0px; padding:40px 50px 60px; text-align:left; color:#ffffff; background:#634229; z-index:3000; overflow:hidden;} .l-footer a:link, .l-footer a:visited {color:#ffffff; text-decoration:none;} article {position:relative;} @media screen and (min-width:768px){ body {} .u-sp {display:none !important;} .l-container {min-width:1220px;} .l-contents {} .u-line::after {content:''; display:block; position:absolute; bottom:-11px; left:calc(50% - (1380px / 4)); width:calc(1380px / 2); height:23px; background:url('assets/img/common/line_color.png') no-repeat 0 0 / cover;} .u-soon {display:flex; justify-content:center; align-items:center; width:80%; max-width:800px; height:200px; margin:50px auto; border:solid 4px #f0f0f0; background:#ffffff;} a[href^="tel:"] {pointer-events:none;} } @media screen and (max-width:767px){ body {-webkit-text-size-adjust:100%;} img {max-width:100%;} .u-pc {display:none !important;} .l-header {} .l-contents {} .u-line::after {content:''; display:block; position:absolute; bottom:-8px; left:0; right:0; width:78%; height:16px; margin:0 auto; background:url('assets/img/common/line_color.png') no-repeat 0 0 / cover;} .u-soon {display:flex; justify-content:center; align-items:center; width:90%; height:100px; margin:20px auto 0; border:solid 2px #f0f0f0; background:#ffffff;} } /* header */ @media screen and (min-width:768px){ .p-logo {overflow:hidden;} .p-logo__link {display:block; width:100px; margin:28px auto;} .p-logo__img {} .p-tel {margin:0 0 25px;} .p-navi {} .p-navi__list {margin:0 auto 20px;} .c-navi {padding:0 0 2px 0; background:url('assets/img/common/nav_line.png') repeat-x 0 100% / 6px 2px;} .c-navi > a {display:block; position:relative; line-height:40px; padding:0 0 0 42px; font-size:14px; font-weight:600; background:#fee9de00; transition:color 0.2s,background 0.2s;} .c-navi > a:hover, .c-navi > a.on {color:#e1374a; background:#fee9deff;} .c-navi > a::before {content:''; position:absolute; top:calc(50% - 7px); left:18px; display:block; width:14px; height:14px; background:url('assets/img/common/nav_on.png') no-repeat 0 0 / cover; opacity:0; transition:opacity 0.2s} .c-navi > a:hover::before, .c-navi > a.on::before {opacity:1;} .c-navi.last {background:none;} .cs-navi a {display:block; position:relative; line-height:32px; padding:0 0 0 52px; font-size:13px; font-weight:600; background:#fee9de00; transition:color 0.2s,background 0.2s;} .cs-navi a:hover, .cs-navi a.on {color:#e1374a; background:#fee9deff;} .cs-navi a::before {content:''; position:absolute; top:calc(50% - 7px); left:18px; display:block; width:14px; height:14px; background:url('assets/img/common/nav_on.png') no-repeat 0 0 / cover; opacity:0; transition:opacity 0.2s} .cs-navi a:hover::before, .cs-navi a.on::before {opacity:1;} .cs-navi .c-navi {padding:0; background:transparent;} .p-nav__btn {display:none;} } @media screen and (min-width:768px) and (max-height:860px){ .l-header {overflow-y:hidden;} .p-logo__link {display:block; width:70px; margin:10px auto;} .p-tel {margin:0 0 10px;} .p-navi__list {margin:0 auto 10px;} .c-navi {} .p-naviMail {width:90px; margin:0 auto;} } @media screen and (max-width:767px){ .p-logo {position:absolute; top:7px; left:12px; overflow:hidden;} .p-logo__link {display:block; height:44px;} .p-logo__img {width:auto; height:100%;} .p-tel {} .p-navi {display:none; position:absolute; top:60px; width:100%; background:#ffffff;} .c-navi {border-bottom:solid 1px #cccccc; background:none;} .c-navi > a {display:block; padding:20px 0; text-align:center; font-weight:600;} .cs-navi {padding:0 0 10px;} .cs-navi a {display:block; padding:10px 0; text-align:center; font-weight:600;} .p-nav__btn {position:absolute; top:0; right:0; width:60px; height:60px;} .p-nav__btn span {display:block; position:absolute; left:18px; width:24px; height:3px; background:#634229; transition:all 0.4s;} .p-nav__btn span:nth-child(1) {top:20px;} .p-nav__btn span:nth-child(2) {top:28px;} .p-nav__btn span:nth-child(3) {bottom:21px;} .p-nav__btn.on span:nth-child(1) {-webkit-transform:translateY(8px) rotate(-45deg); transform:translateY(8px) rotate(-45deg);} .p-nav__btn.on span:nth-child(2) {opacity:0;} .p-nav__btn.on span:nth-child(3) {-webkit-transform:translateY(-8px) rotate(45deg); transform:translateY(-8px) rotate(45deg);} /* .p-naviMail {position:absolute; top:10px; right:60px; } .p-naviMail__link {display:block;} .p-naviMail__img {display:block; width:auto; height:40px;} */ .p-naviTel {position:absolute; top:10px; right:110px;} .p-naviTel__link {display:block;} .p-naviTel__img {display:block; width:auto; height:40px;} } /* footer */ .p-bnr {padding:60px 0 30px; background:#ffffff;} .p-bnr__lead {padding:0 0 30px; font-size:18px;} .p-bnr__list {display:flex; max-width:800px; margin:0 auto; flex-wrap:wrap; justify-content:center;} .c-bnr {width:30%; flex:0 0 30%; margin:0 10px 20px;} .c-bnr__link {} .c-bnr__img {} .p-footer {font-size:13px;} .p-footer__wrap {display:flex; justify-content:space-between; align-items:center; max-width:1000px; margin:0 auto 50px;} .p-footer__navi {width:215px; flex:1 0 215px; padding:30px 35px 30px 0; background:url('assets/img/common/bg_foot_dot.png') repeat-y 100% 0 / 3px auto;} .p-footer__address {display:flex; margin:10px 30px; flex-shrink:5; flex-wrap:wrap; justify-content:space-between; align-items:center;} .p-footer__contact {width:90%; max-width:310px; padding:10px 0;} .p-footLogo {width:180px; margin:0 0 20px;} .p-footLogo__link {display:block;} .p-footLogo__img {width:100%; height:auto;} .p-footBtn {margin:0 0 15px;} .p-footBtn__list {display:flex; justify-content:center;} .c-footBtn {margin:0 10px;} .c-footBtn__link {} .c-footBtn__img {} .p-footNavi {} .p-footNavi__list {} .c-footNavi {background:url('assets/img/common/ic_arrow.svg') no-repeat 2px center / 5px 7px;} .c-footNavi__link {display:inline-block; padding:0 0 0 15px; line-height:20px;} .p-footSupport {width:100%; flex:0 0 100%; margin:0 0 15px; padding:15px 0 0; border-top:solid 1px #b49d8b;} .p-footSupport__ttl {margin:0 0 10px; font-weight:bold; font-size:16px;} .p-footSupport__text {line-height:1.4;} .p-footAddress {width:48%; flex:0 0 48%; margin:0 0 15px; padding:15px 0 0;} .p-footAddress__ttl {margin:0 0 10px; font-weight:bold; font-size:18px;} .p-footAddress__text {line-height:1.4;} .p-noteProject {width:100%; padding:15px 0 0; border-top:solid 1px #b49d8b; line-height:20px;} .p-noteProject__link {display:inline-block; margin:10px 0 0; padding:0 0 0 15px; background:url('assets/img/common/ic_arrow.svg') no-repeat 2px center / 5px 7px;} .p-footTel {} .p-footTel__img {} .p-footMail {margin:0;} .p-footMail__link {display:flex; justify-content:center; align-items:center; padding:10px; border:solid 2px #bfab9c; border-radius:10px; background:#6f4d33;} .p-footMail__img {width:30px; height:auto; margin:0 10px 0 0;} .p-footMail__text {font-weight:bold; font-size:15px; line-height:1.2;} .p-copy {width:100%; text-align:center; font-size:11px;} @media screen and (min-width:768px){ .p-gotop {position:fixed; bottom:30px; right:10px; width:42px; -webkit-transition:right 0.2s; -moz-transition:right 0.2s; transition:right 0.2s; z-index:2000;} .p-gotop.no {right:-42px;} .p-gotop__btn {display:block; width:42px; height:63px; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; transition:all 0.2s;} } @media screen and (max-width:767px){ .p-gotop {display:block; position:relative; width:50px; height:50px; margin:0 auto -25px; border:solid 2px #634229; border-radius:25px; background:#ffffff; z-index:3500;} .p-gotop__btn {display:block; position:absolute; top:17px; left:13px; width:20px; height:20px; border-style:solid; border-color:#634229; border-width:3px 3px 0 0; transform:rotate(-45deg);} .l-footer {padding:50px 20px;} .p-footLogo {margin:0 auto 15px;} .p-footer__navi {padding:0; border-bottom:solid 1px #b49d8b; background:transparent;} .p-footer__address {margin:20px 0; border:0;} .p-footer__contact {margin:0 auto;} .p-bnr {padding:40px 0 20px;} .p-bnr__lead {font-size:14px; margin:0 20px;} .p-bnr__list {flex-wrap:wrap;} .c-bnr {width:40%; flex:0 0 40%; margin:0 5px 10px;} .p-footer__wrap {flex-wrap:wrap;} .p-footAddress {width:100%; flex:0 0 100%;} .p-footAddress:first-of-type {padding:0 0 15px; border-bottom:solid 1px #b49d8b;} } /* HOME */ @media screen and (min-width:768px){ #home.p-home {position:relative; margin:0 0 40px;} #home .p-home__hero {position:relative; height:550px; margin:0 auto; background:url('assets/img/home/img_hero.jpg') no-repeat 100% 0 / cover; z-index:100;} #home .p-home__hero__img {position:absolute; top:50px; left:50px; width:calc(806px / 2); height:auto;} #home .p-home__sns {position:absolute; top:410px; left:65px; width:380px; margin:0; padding:10px 20px; border-radius:20px; background:rgba(225,55,74,1); z-index:200;} #home .c-home__sns {display:flex; justify-content:space-between;} #home .c-home__sns__btn {} #home .c-home__sns__link {display:flex; align-items:center; color:#ffffff;} #home .c-home__sns__img {margin:0 10px 0 0;} #home .p-info {display:flex; justify-content:center; position:relative; margin:-30px 0 0; background:#ffffff; z-index:200;} #home .p-info__wrap {display:flex; align-items:flex-start; position:relative; width:1000px; padding:15px 0;} #home .p-info__ttl {padding:0 30px 0 15px;} #home .p-info__ttl__img {width:94px; height:auto;} #home .p-info__list {} #home .c-info {padding:10px 0; text-align:left;} #home .c-info .wp-block-file {margin:0;} #home .c-info .wp-block-file .wp-block-file__button {background:#634229;} #home .p-blog {margin:0 0 20px; background:#fdf8ed; overflow:hidden;} #home .p-blog__wrap {width:100%;} #home .p-blog__ttl {max-width:1000px; margin:0 auto; padding:20px 10px; text-align:center;} #home .p-blog__list {display:flex; max-width:1000px; justify-content:flex-start; margin:10px auto 20px;} #home .c-blog {width:46%; flex:0 0 46%; display:flex; margin:0 2% 20px; justify-content:flex-start; text-align:left;} #home .c-blog:nth-of-type(n + 3) {display:none;} #home .c-blog__pic {width:40%; flex:0 0 40%; margin:0 20px 0 0;} #home .c-blog__doc {width:55%; flex:1 1 55%;} #home .c-blog__cap {padding:10px 0 15px; font-size:16px; font-weight:bold; line-height:1.2;} #home .c-blog__cat {margin:0; font-size:12px;} #home .c-blog__cat a {display:inline-block; margin:0 5px 5px 0; padding:5px 10px; border-radius:5px; background:#f4ebcc;} #home .c-blog__txt {line-height:1.6; font-size:14px;} #home .p-banner {padding:20px 0; background:#f1f9ea;} #home .p-banner__wrap {display:flex; align-items:center; justify-content:flex-start; position:relative; width:970px; margin:0 auto;} #home .p-banner__link {display:block; width:460px; padding:15px 0; border-radius:10px; text-align:center; background:#634229;} #home .p-banner__img {width:400px;} #home .p-badge {position:absolute; right:15px; bottom:-40px; width:282px; height:auto; z-index:500;} } @media screen and (max-width:767px){ #home.p-home {position:relative; margin:0 0 20px;} #home .p-home__hero__img {width:100%; height:123.5vw;} #home .p-home__sns {position:absolute; top:100vw; left:0; right:0; width:94%; margin:0 auto; padding:8px 15px; border-radius:15px; background:rgba(225,55,74,1); z-index:200;} #home .c-home__sns {display:flex; justify-content:space-between;} #home .c-home__sns__btn {} #home .c-home__sns__link {display:flex; align-items:center; color:#ffffff; white-space:nowrap;} #home .c-home__sns__img {height:35px; margin:0 10px 0 0;} #home .p-info {display:flex; justify-content:center; position:relative; margin:-20px 0 0; background:#ffffff; z-index:200;} #home .p-info__wrap {display:flex; align-items:flex-start; position:relative; width:100%; padding:15px 0; } #home .p-info__ttl {width:25%; padding:0 10px 0 15px;} #home .p-info__ttl__img {height:auto;} #home .p-info__list {width:75%; padding:0 15px 0 0;} #home .c-info {padding:5px 0; text-align:left; font-size:14px; line-height:1.4;} #home .c-info .wp-block-file {margin:0;} #home .c-info .wp-block-file .wp-block-file__button {background:#634229;} #home .p-blog {margin:0 0 20px; background:#fdf8ed; overflow:hidden;} #home .p-blog__wrap {width:100%; margin:0 0 20px; background:#fdf8ed;} #home .p-blog__ttl {padding:20px 0; text-align:center;} #home .p-blog__ttl img {height:50px;} #home .p-blog__list {} #home .c-blog {margin:0 0 20px; padding:0 0 20px; border-bottom:dashed 1px #ded6bb; text-align:left; overflow:hidden;} #home .c-blog:last-of-type {border-bottom:0px;} #home .c-blog__pic {margin:0 20px 20px;} #home .c-blog__pic img {width:100%;} #home .c-blog__doc {margin:0 20px;} #home .c-blog__cap {margin:0 0 10px; font-size:15px; font-weight:bold; line-height:1.2;} #home .c-blog__cat {margin:0; font-size:12px;} #home .c-blog__cat time {display:block; margin:0 0 10px 0;} #home .c-blog__cat a {display:inline-block; margin:0 5px 5px 0; padding:5px 10px; border-radius:3px; background:#f4ebcc;} #home .c-blog__txt {font-size:13px; line-height:1.6;} #home .c-blog__more {padding:10px 15px; border-radius:5px; background:#f4ebcc; font-size:13px; float:right;} #home .p-badge {position:absolute; right:5px; bottom:80px; width:30%; height:auto; z-index:500;} } /* GUIDE */ @media screen and (min-width:768px){ #guide.p-guide {padding:80px 0 80px; background:#fcf9e8; z-index:90;} #guide .p-guide__ttl {margin:0;} #guide .p-guide__ttl__img {width:calc(478px / 2);} #guide .p-nursery {display:flex; flex-wrap:wrap; justify-content:space-between; width:90%; max-width:1000px; margin:0 auto;} #guide .p-nursary__ttl {width:100%; background:url('assets/img/common/nav_line.png') repeat-x 0 0 / 6px 2px; overflow:hidden;} #guide .p-nursary__ttl__img {display:block; width:calc(218px / 2); height:auto; margin:15px auto 13px;} #guide .p-nursary__ttl::after {content:''; display:block; width:100%; height:2px; background:url('/assets/img/common/nav_line.png') repeat-x 0 0 / 6px 2px;} #guide .c-nursery {width:48%; margin:100px 0 0; padding:0 20px; border:solid 3px #ffffff; border-radius:10px; background:#ffffff;} #guide .c-nursery.hirao {border-color:#9ae2d2;} #guide .c-nursery.shime {border-color:#ead688;} #guide .c-nursery__ttl {width:calc(314px / 2); margin:calc(-318px / 4) auto 20px;} #guide .c-nursery__ttl__img {} #guide .c-nursery__sttl {margin:25px 5px 10px; font-size:17px; font-weight:bold; text-align:left; letter-spacing:1px;} #guide .c-nursery__tip {margin:5px 5px 10px; font-size:14px; font-weight:bold; text-align:left; color:#dd0000;} #guide .c-nursery__data {display:flex; flex-wrap:wrap; margin:0 0 10px; text-align:left; font-size:15px; line-height:1.8;} #guide .c-nursery__data__cap {flex:0 0 22%;} #guide .c-nursery__data__text {flex:0 0 77%;} #guide a.c-nursery__data__link, #guide a.c-nursery__data__link:visited {text-decoration:underline;} #guide .c-nursery__table {width:100%; border:solid 1px #634229; border-spacing:0; border-collapse:collapse;} #guide .c-nursery__table__row {} #guide .c-nursery__table__cap {padding:8px 0 6px; border:solid 1px #634229; font-size:14px;} #guide .hirao .c-nursery__table__cap {background:#d4f9f1;} #guide .shime .c-nursery__table__cap {background:#fdf2a7;} #guide .c-nursery__table__item {padding:8px 0 6px; border:solid 1px #634229; font-size:14px;} #guide .c-nursery__table__item.u-fontL {font-size:18px;} #guide .c-nursery__map {margin:25px 0 20px;} #guide .c-nursery__map__frame {width:100%; height:450px; border:0;} #guide .c-nursery__note {width:90%; max-width:900px; margin:30px auto 0; text-align:left; font-size:14px; line-height:1.8;} #guide .c-nursery__note__item::before {content:'● '} #guide .u-min {font-size:13px;} #guide .u-win {display:inline-block; position:relative; padding:0 25px 0 0;} #guide .u-win::before {content:''; position:absolute; top:6px; right:0; width:14px; height:10px; border:solid 1px #3b6940; border-radius:2px; background:rgba(59,104,65,0.3);} #guide .u-win::after {content:''; position:absolute; top:9px; right:3px; width:14px; height:10px; border:solid 1px #3b6940; border-radius:2px; background:#ffffff;} } @media screen and (max-width:767px){ #guide.p-guide {padding:40px 0 40px; background:#fbf5d2; z-index:90;} #guide .p-guide__ttl {margin:0 0 20px;} #guide .p-guide__ttl__img {width:calc(478px / 3);} #guide .p-nursery {display:flex; flex-wrap:wrap; justify-content:space-between; width:90%; margin:0 auto;} #guide .p-nursary__ttl {width:100%; margin:0; background:url('assets/img/common/nav_line.png') repeat-x 0 0 / 6px 2px; overflow:hidden;} #guide .p-nursary__ttl__img {display:block; width:calc(218px / 2.5); height:auto; margin:15px auto 13px;} #guide .p-nursary__ttl::after {content:''; display:block; width:100%; height:2px; background:url('assets/img/common/nav_line.png') repeat-x 0 0 / 6px 2px;} #guide .c-nursery {margin:65px 0 0; padding:0 10px; border:solid 1px #ffffff; border-radius:10px; background:#ffffff;} #guide .c-nursery.hirao {border-color:#9ae2d2;} #guide .c-nursery.shime {border-color:#ead688;} #guide .c-nursery__ttl {width:calc(314px / 3); margin:calc(-318px / 6) auto 20px;} #guide .c-nursery__ttl__img {} #guide .c-nursery__sttl {margin:25px 5px 10px; font-size:16px; font-weight:bold; text-align:left;} #guide .c-nursery__tip {margin:5px 5px 10px; font-size:14px; font-weight:bold; text-align:left; color:#dd0000;} #guide .c-nursery__data {display:flex; flex-wrap:wrap; text-align:left; font-size:14px; line-height:1.4;} #guide .c-nursery__data__cap {flex:0 0 30%; margin:0 0 5px;} #guide .c-nursery__data__text {flex:0 0 70%; margin:0 0 5px;} #guide a.c-nursery__data__link, #guide a.c-nursery__data__link:visited {text-decoration:underline;} #guide .c-nursery__table {width:100%; border:solid 1px #634229; border-spacing:0; border-collapse:collapse;} #guide .c-nursery__table__row {} #guide .c-nursery__table__cap {padding:8px 0 6px; border:solid 1px #634229; font-size:13px;} #guide .hirao .c-nursery__table__cap {background:#d4f9f1;} #guide .shime .c-nursery__table__cap {background:#fdf2a7;} #guide .c-nursery__table__item {padding:8px 0 6px; border:solid 1px #634229; font-size:13px;} #guide .c-nursery__table__item.u-fontL {font-size:16px;} #guide .c-nursery__map {margin:20px 0 20px;} #guide .c-nursery__map__frame {width:100%; height:300px; border:0;} #guide .c-nursery__note {width:85%; margin:30px auto 0; text-align:left; font-size:13px; line-height:1.5;} #guide .c-nursery__note__item {padding:0 0 5px 1.5em; text-indent:-1.5em;} #guide .c-nursery__note__item::before {content:'● '} #guide .u-min {font-size:12px;} #guide .u-win {display:inline-block; position:relative; padding:0 25px 0 0;} #guide .u-win::before {content:''; position:absolute; top:2px; right:0; width:14px; height:10px; border:solid 1px #3b6940; border-radius:2px; background:rgba(59,104,65,0.3);} #guide .u-win::after {content:''; position:absolute; top:5px; right:3px; width:14px; height:10px; border:solid 1px #3b6940; border-radius:2px; background:#ffffff;} } /* MONTESSORI */ @media screen and (min-width:768px){ #montessori.p-montessori {padding:80px 0 80px; background:#f1f9ea; z-index:80;} #montessori .p-montessori__ttl {margin:0 0 40px;} #montessori .p-montessori__ttl__img {width:calc(480px / 2);} #montessori .p-montessori__sttl {margin:0 0 15px; text-align:left;} #montessori .p-montessori__sttl__img {width:calc(550px / 2);} #montessori .p-montessori__box {display:flex; width:90%; max-width:960px; margin:40px auto 60px; padding:50px 60px; background:url('assets/img/montessori/bg_montessori.svg') no-repeat 50% 50% / contain;} #montessori .p-montessori__doc {position:relative; padding:20px 40px 20px 0;} #montessori .p-montessori__doc__pic {position:absolute; top:0; left:290px; width:75px;} #montessori .p-montessori__doc__text {text-align:left; font-size:16px; line-height:1.5;} #montessori .p-montessori__photo {flex:0 0 200px; width:200px;} #montessori .p-montessori__photo__img {width:100%;} #montessori .p-montessori__photo__cap {margin:5px 0 0; font-size:14px;} } @media screen and (max-width:767px){ #montessori.p-montessori {padding:40px 0 40px; background:#e4f2ce; z-index:80;} #montessori .p-montessori__ttl {margin:0 0 20px;} #montessori .p-montessori__ttl__img {width:calc(480px / 3);} #montessori .p-montessori__sttl {margin:5px 20px 15px; text-align:left;} #montessori .p-montessori__sttl__img {width:calc(550px / 2.4);} #montessori .p-montessori__box {margin:25px 5% 30px; padding:30px 0; border-radius:20px; background:#ffffff;} #montessori .p-montessori__doc {position:relative; } #montessori .p-montessori__doc__pic {position:absolute; top:-10px; right:20px; width:60px;} #montessori .p-montessori__doc__text {margin:0 25px; font-size:14px; line-height:1.4; text-align:left;} #montessori .p-montessori__photo {width:60%; margin:20px auto 0;} #montessori .p-montessori__photo__img {width:100%;} #montessori .p-montessori__photo__cap {margin:5px 0 0; font-size:13px;} } @media screen and (max-width:320px){ #montessori .p-montessori__doc__pic {top:-20px; right:10px; width:40px;} } /* DAY */ @media screen and (min-width:768px){ #day.p-day {padding:80px 0 80px; z-index:70;} #day .p-day__ttl {margin:0 0 40px;} #day .p-day__ttl__img {width:calc(394px / 2);} #day .p-day__hero {width:100%; max-width:1200px; margin:0 auto;} #day .p-day__hero__img {} #day .p-day__doc {margin:0 auto; text-align:center;} } @media screen and (max-width:767px){ #day.p-day {padding:40px 0 40px; z-index:70;} #day .p-day__ttl {margin:0 0 20px;} #day .p-day__ttl__img {width:calc(394px / 3);} #day .p-day__hero {width:100%; margin:0 auto;} #day .p-day__hero__img {} #day .p-day__doc {margin:0 8%; text-align:center;} } /* FLOW */ @media screen and (min-width:768px){ #flow.p-flow {padding:80px 0 80px; background:#ffffff; z-index:60;} #flow .p-flow__ttl {margin:0 0 40px;} #flow .p-flow__ttl__img {width:calc(394px / 2);} } @media screen and (max-width:767px){ #flow.p-flow {padding:40px 0 40px; background:#ffffff; z-index:60;} #flow .p-flow__ttl {margin:0 0 20px;} #flow .p-flow__ttl__img {width:calc(394px / 3);} } /* CONTACT */ .p-contact {position:relative; width:100%; padding:100px 0px 70px; text-align:left; color:#ffffff; background:#fb9822 url('images/contact/bg_contact.png') repeat 0px 0px; overflow:hidden;} .p-contact__ttl {margin:0px 0px 30px 290px; font-size:20px; font-weight:bold;} .p-contact__text {margin:0px 0px 0px 290px; font-size:15px; line-height:1.8;} .p-contact__text p {margin:0px 0px 1em 0px;} /* CONTACT */ #contact div.ttlBox {background:#000000 url('images/blog/bg_blog.jpg') no-repeat 50% 50%;} #contact div.ttlBox .ttl {position:relative; height:270px;} #contact div.ttlBox .ttl img {position:absolute; top:50px; left:-20px;} #contact div.contents form {margin:0px 0px 0px 70px;} #contact div.contents form p {margin:0px 0px 10px;} #contact div.contents form .logged-in-as {margin:0px 0px 20px; padding:10px 10px 9px; border-radius:5px; color:#ffffff; font-size:0.813em; background:#ce4f63;} #contact div.contents form .logged-in-as a {text-decoration:underline; color:#ffffff;} #contact div.contents form label {display:inline-block; width:15%; margin:0px 0px 5px; font-size:0.813em;} #contact div.contents form .comment-form-comment label {display:block; width:100%;} #contact div.contents form textarea {width:100%; padding:10px; border:0px;} #contact div.contents form input[type=tel], #contact div.contents form input[type=email], #contact div.contents form input[type=text] {display:inline-block; width:85%; padding:5px 7px; border:0px; border-radius:5px;} #contact div.contents form .required {color:#dd0000;} #contact div.contents form .att {font-weight:normal; float:right;} #contact div.contents form .form-submit {margin:0px; text-align:left;} #contact div.contents form button.submit {display:inline-block; margin:10px 0px; padding:8px 30px; border:0px; border-radius:5px; cursor:pointer; color:#ffffff; font-weight:bold; background:#68c5ba;} #contact div.contents form button.submit:hover {background:#46857e;} @media screen and (max-width:767px){ } /* DOWNLOAD */ @media screen and (min-width:768px){ #download.p-download {padding:50px 0 80px; z-index:50;} #download .p-download__ttl {position:relative; margin:0 0 60px; padding:0 0 40px;} #download .p-download__ttl__img {width:calc(380px / 2);} #download .p-download__wrap {max-width:720px; margin:0 auto;} #download .p-download__under {text-align:center; font-size:18px;} #download .p-download__list {} #download .c-download {padding:10px 0 0; text-align:left;} #download .c-download .wp-block-file {padding:0 0 0 1.5em; text-indent:-1.5em;} #download .c-download a::before {content:'● ';} } @media screen and (max-width:767px){ #download.p-download {padding:40px 0 40px; z-index:50;} #download .p-download__ttl {position:relative; margin:0 0 40px; padding:0 0 30px;} #download .p-download__ttl__img {width:calc(380px / 3);} #download .p-download__wrap {margin:0 20px;} #download .p-download__list {} #download .p-download__under {font-size:15px;} #download .c-download {padding:5px 0 0; text-align:left;} #download .c-download .wp-block-file {padding:0 0 0 1.5em; text-indent:-1.5em;} #download .c-download a::before {content:'● ';} } /* PRIVACY */ @media screen and (min-width:768px){ #privacy.p-privacy {width:90%; max-width:1000px; margin:0 auto; padding:60px 0 80px; text-align:left;} #privacy .p-privacy__ttl {margin:0 0 40px;} #privacy .p-privacy__ttl__img {display:block; width:40px; height:auto; margin:0 auto 20px;} #privacy .p-privacy__ttl__text {display:block; font-size:20px; font-weight:bold; text-align:center;} #privacy .p-privacy__ttl::after {content:''; display:block; width:100%; height:2px; margin:20px 0 0; background:url('assets/img/common/nav_line.png') repeat-x 0 0 / 6px 2px;} #privacy .p-privacy__lead {margin:20px 20px 0; font-size:15px; line-height:1.8;} #privacy .p-privacy__sign {margin:0 20px 40px; font-size:15px; text-align:right; line-height:1.4;} #privacy .p-privacy__list {margin:20px; line-height:1.8;} #privacy .c-privacy__cap {margin:0 0 5px; padding:0 5px 5px; border-bottom:solid 1px #f0f0f0; font-size:16px; font-weight:bold;} #privacy .c-privacy__text {margin:0 0 30px; padding:0 5px; font-size:14px;} #privacy .c-privacy__list {} #privacy .c-privacy__list__item {padding:0 0 10px 1.5em; text-indent:-1.5em;} #privacy .c-privacy__list__item::before {content:'・ ';} #privacy .p-privacy__info {margin:0 20px; padding:20px; border-radius:15px; background:#fcf9e8;} #privacy .p-privacy__info__ttl {margin:0 0 10px; font-weight:bold; font-size:16px; line-height:1.8;} #privacy .p-privacy__info__text {font-size:14px; line-height:1.4;} #privacy .p-privacy__info__data {font-size:14px; line-height:1.4;} } @media screen and (max-width:767px){ #privacy.p-privacy {width:100%; margin:0 auto; padding:30px 5% 40px; text-align:left;} #privacy .p-privacy__ttl {margin:0 0 20px;} #privacy .p-privacy__ttl__img {display:block; width:35px; height:auto; margin:0 auto 20px;} #privacy .p-privacy__ttl__text {display:block; font-size:18px; font-weight:bold; text-align:center;} #privacy .p-privacy__ttl::after {content:''; display:block; width:100%; height:2px; margin:15px 0 0; background:url('assets/img/common/nav_line.png') repeat-x 0 0 / 6px 2px;} #privacy .p-privacy__lead {margin:15px 0 0; font-size:14px; line-height:1.4;} #privacy .p-privacy__sign {margin:10px 0 20px; font-size:14px; text-align:right; line-height:1.4;} #privacy .p-privacy__list {margin:20px 0; line-height:1.4;} #privacy .c-privacy__cap {margin:0 0 5px; padding:0 5px 5px; border-bottom:solid 1px #f0f0f0; font-size:15px; font-weight:bold;} #privacy .c-privacy__text {margin:0 0 20px; padding:0; font-size:13px;} #privacy .c-privacy__list {} #privacy .c-privacy__list__item {padding:0 0 10px 1.5em; text-indent:-1.5em;} #privacy .c-privacy__list__item::before {content:'・ ';} #privacy .p-privacy__info {margin:0; padding:15px; border-radius:10px; background:#fcf9e8;} #privacy .p-privacy__info__ttl {margin:0 0 5px; font-weight:bold; font-size:15px; line-height:1.8;} #privacy .p-privacy__info__text {font-size:13px; line-height:1.4;} #privacy .p-privacy__info__data {font-size:13px; line-height:1.4;} } /* BLOG */ @media screen and (min-width:768px){ #blog.p-blog {padding:0 0 80px; z-index:50;} #blog a:hover {text-decoration:underline;} #blog .p-blog__ttl {position:relative; width:100%; height:360px; margin:0 0 60px; padding:0; background:url('./assets/img/blog/bg_ttl.jpg') no-repeat 50% 50% / cover;} #blog .p-blog__ttl__img {position:absolute; top:0; bottom:0; left:0; right:0; width:400px; margin:auto;} #blog .l-blog {display:flex; max-width:1100px; margin:0 auto; padding:0 50px; flex-wrap:wrap; justify-content:space-between;} #blog .p-blog__cat {width:100%; margin:0 0 30px; padding:15px 20px; font-size:24px; text-align:left; background:#f4ebcc;} #blog .p-blog__wrap {width:calc(100% - 280px); flex:1 1 calc(100% - 280px); margin:0 40px 0 0;} #blog .p-blog__under {text-align:center; font-size:18px;} #blog .p-blog__list {margin:0 0 50px;} #blog .c-blog {clear:both; display:flex; margin:0 0 20px; justify-content:flex-start; text-align:left;} #blog .c-blog__pic {width:40%; flex:0 0 40%; margin:0 30px 0 0;} #blog .c-blog__doc {width:55%; flex:1 1 55%;} #blog .c-blog__cap {padding:10px 0 15px; font-size:20px; font-weight:bold; line-height:1.2;} #blog .c-blog__cat {margin:0 0 10px; font-size:12px;} #blog .c-blog__cat time {display:inline-block; margin:0 10px 0 0; padding:0; font-size:15px;} #blog .c-blog__cat a {display:inline-block; margin:0 5px 0 0; padding:5px 10px; border-radius:5px; background:#f4ebcc;} #blog .c-blog__txt {line-height:1.6;} #blog .c-blog__more {padding:10px 15px; border-radius:5px; background:#f4ebcc; font-size:13px; float:right;} #blog .c-single {text-align:left;} #blog .c-single__ttl {font-size:26px; margin:0 0 20px; line-height:1.4;} #blog .c-single__cat {margin:0 0 40px; font-size:12px;} #blog .c-single__cat time {display:inline-block; margin:0 10px 0 0; padding:0; font-size:15px;} #blog .c-single__cat a {display:inline-block; margin:0 5px 0 0; padding:5px 10px; border-radius:5px; background:#f4ebcc;} #blog .c-single__pic {position:relative; width:100%; padding-top:calc(100% / 16 * 9); margin:0 0 40px; background:#fafafa;} #blog .c-single__pic img {position:absolute; height:auto; max-height:100%; margin:auto; top:50%; left:50%; transform:translate(-50%,-50%);} #blog .c-single__doc {line-height:1.6; padding:0 0 30px;} #blog .c-single__doc p {margin:0 0 1.5rem;} #blog .c-single__doc a {text-decoration:underline;} #blog .c-single__doc strong {font-weight:bold;} #blog .c-single__tag {padding:0 0 30px;} #blog .c-single__tag a {display:inline-block; position:relative; margin:0 8px 0 12px; padding:3px 10px 3px 0; border-radius:0 3px 3px 0; color:#ffffff; font-size:14px; line-height:20px; background:#634229;} #blog .c-single__tag a::before {content:''; display:inline-block; position:relative; width:6px; height:6px; margin:0 8px 0 0; border:solid 3px #ffffff; border-radius:20px; z-index:100;} #blog .c-single__tag a::after {content:''; display:block; position:absolute; top:4px; left:-9px; width:18px; height:18px; border-radius:3px 0 0 0; background:#634229; transform:rotate(-45deg); z-index:90;} #blog .l-side {width:240px; flex:0 0 240px; margin:0; padding:25px 20px 0; border:solid 1px #ded6bb; border-radius:10px; text-align:left; background:url('assets/img/common/bg_side.jpg') repeat 0 0 / 600px 600px;} #blog .p-side {margin:0 0 50px;} #blog .p-side__ttl {margin:0 0 10px; padding:0 5px 10px; border-bottom:dashed 1px #ded6bb; font-weight:bold; font-size:15px;} #blog .p-side__list {} #blog .c-side {font-size:13px;} #blog .c-side a {display:inline-block; padding:3px 5px; line-height:1.4;} #blog .p-subSide__list {margin:5px 0 10px 10px;} #blog .c-subSide {margin:0 0 3px;} #blog .pager {display:flex; justify-content:center; margin:0 0 50px;} #blog .pager p {margin:0 10px;} #blog .pager p span {display:inline-block; margin:0 5px; padding:10px; border-radius:3px; background:#fdf8ed;} #blog .pager p a {display:inline-block; margin:0 5px; padding:10px; border-radius:3px; text-decoration:underline; background:#fdf8ed;} } @media screen and (max-width:767px){ #blog.p-blog {padding:0 0 40px; z-index:50;} #blog .p-blog__ttl {position:relative; margin:0; width:100%; height:160px; padding:0; background:url('./assets/img/blog/bg_ttl.jpg') no-repeat 50% 50% / cover;} #blog .p-blog__ttl__img {position:absolute; top:0; bottom:0; left:0; right:0; height:50%; margin:auto;} #blog .l-blog {padding:20px 0 0;} #blog .p-blog__cat {width:100%; margin:0 0 30px; padding:15px 20px; font-size:18px; text-align:left; background:#f4ebcc;} #blog .p-blog__wrap {margin:0;} #blog .p-blog__under {text-align:center; font-size:18px;} #blog .p-blog__list {} #blog .c-blog {margin:0 0 20px; padding:0 0 20px; border-bottom:dashed 1px #ded6bb; text-align:left; overflow:hidden;} #blog .c-blog:last-of-type {border-bottom:0px;} #blog .c-blog__pic {margin:0 20px 20px;} #blog .c-blog__pic img {width:100%;} #blog .c-blog__doc {margin:0 20px;} #blog .c-blog__cap {margin:0 0 10px; font-size:15px; font-weight:bold; line-height:1.2;} #blog .c-blog__cat {margin:0 0 10px; font-size:12px;} #blog .c-blog__cat time {display:block; margin:0 0 10px 0;} #blog .c-blog__cat a {display:inline-block; margin:0 5px 0 0; padding:5px 10px; border-radius:3px; background:#f4ebcc;} #blog .c-blog__txt {font-size:13px; line-height:1.6;} #blog .c-blog__more {padding:10px 15px; border-radius:5px; background:#f4ebcc; font-size:13px; float:right;} #blog .c-single {margin:0 20px 20px; text-align:left;} #blog .c-single__ttl {font-size:20px; margin:0 0 15px; padding:10px 0 0; line-height:1.4; font-weight:bold;} #blog .c-single__cat {margin:0 0 20px; font-size:12px;} #blog .c-single__cat time {display:block; margin:0 0 5px 0; padding:0; font-size:13px;} #blog .c-single__cat a {display:inline-block; margin:0 5px 0 0; padding:5px 10px; border-radius:5px; background:#f4ebcc;} #blog .c-single__pic {position:relative; width:100%; max-height:calc(100vw - 40px); margin:0 0 30px; background:#fafafa;} #blog .c-single__pic img {height:auto; max-height:100%; margin:0 auto;} #blog .c-single__doc {line-height:1.6; padding:0 0 50px;} #blog .c-single__doc p {margin:0 0 1.5rem;} #blog .c-single__doc a {text-decoration:underline;} #blog .c-single__tag {padding:0 0 30px;} #blog .c-single__tag a {display:inline-block; position:relative; margin:0 8px 0 12px; padding:3px 10px 3px 0; border-radius:0 3px 3px 0; color:#ffffff; font-size:14px; line-height:20px; background:#634229;} #blog .c-single__tag a::before {content:''; display:inline-block; position:relative; width:6px; height:6px; margin:0 8px 0 0; border:solid 3px #ffffff; border-radius:20px; z-index:100;} #blog .c-single__tag a::after {content:''; display:block; position:absolute; top:4px; left:-9px; width:18px; height:18px; border-radius:3px 0 0 0; background:#634229; transform:rotate(-45deg); z-index:90;} #blog .l-side {width:100%; margin:0; padding:20px; border-top:solid 1px #ded6bb; text-align:left; background:url('assets/img/common/bg_side.jpg') repeat 0 0 / 600px 600px;} #blog .p-side {} #blog .p-side__ttl {margin:0 0 10px; padding:0 5px 10px; border-bottom:dashed 1px #ded6bb; font-weight:bold; font-size:15px;} #blog .p-side__list {margin:0 0 20px;} #blog .c-side {font-size:14px;} #blog .c-side a {display:inline-block; padding:5px 5px;} #blog .p-subSide__list {margin:5px 0 10px 10px;} #blog .c-subSide {margin:0 0 3px;} #blog .pager {display:flex; justify-content:center; margin:0 0 50px;} #blog .pager p {margin:0 10px; padding:10px; border-radius:3px; background:#fdf8ed;} }