@charset "utf-8";
/* kv */
.kv {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.kv .catch-copy { /*入れ物*/
position: absolute;
top: calc(100vh - 80vh);
}
.kv .main-copy {
width: 500px;
margin: 0 auto;
}
.kv .sub-copy {
font-size: 1.1em;
color: #333;
text-align: center;
line-height: 1;
letter-spacing: 0.2em;
margin: 10px 0;
background:rgba(255 ,255 ,255 ,0.8);
padding: 10px;
}
.kv .banner-btn {
width: 350px;
margin: 50px auto 0 auto;
}
.kv .banner-btn img {
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);
}
/* video */
.video {
width:100%;
margin: 0 auto;
height: 96vh;
position: relative;
top: 0;
left: 0;
overflow: hidden;
z-index: -1;
}
.video::after {
content: '';
width: 100%;
height: 100%;
background-color: #180913;
display: block;
position: absolute;
left: 0;
top: 0;
opacity: .3;
}
.video video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.shapedividers_com-1337 {
overflow: hidden;
position: relative;
}
.shapedividers_com-1337::before {
content: '';
font-family: 'shape divider from ShapeDividers.com';
position: absolute;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw;
background-size: 100% 81px;
background-position: 50% 100%;
background-image: url('data:image/svg+xml;charset=utf8, ');
}
/*background-image: url('data:image/svg+xml;charset=utf8, ');
}*/
@media (min-width:2100px) {
.shapedividers_com-1337::before {
background-size: 100% calc(2vw + 81px);
}
}
/* Shiseikarute */
.shisei-karte{
width: 100%;
background: #f0ece3;
/* background-image: linear-gradient(to right, #f99122 0%, #f94614 100%);*/
/*margin-top: 2rem;*/
padding: 6rem 0;
}
.shisei-karte .area1{
width: 100%;
padding: 0.5rem;
}
.shisei-karte .area1 p{
width: 80%;
margin: 0 auto;
padding: 1rem 0;
font-size: 1.8rem;
line-height: 135%;
color: #3c4d69;
}
.shisei-karte .area2{
text-align: center;
}
.shisei-karte .area3{
padding: 0.5rem;
text-align: center;
}
.shisei-karte .area3 p{
padding: 1rem 0;
font-size: 2.2rem;
font-weight: bold;
color: #3c4d69;
}
.shisei-karte .area4{
text-align: center;
padding: 2rem 0;
}
/* section-1 */
.section-1-container {
padding: 5rem 0 7rem 0;
background: url("../home/aboutus_txt.svg") no-repeat right 3rem;
background-size: 500px;
}
.section-1-container .container-full {
display: flex;
}
.section_1-img {
width: 70%;
}
.section_1-txt {
width: 50%;
display: flex;
align-items: center;
}
.section-1-container .text-block {
width: 80%;
margin-right: auto;
margin-left: 3rem;
}
.section-1-container img {
border-radius: 0 300px 0 300px;
}
.top_h3_title {
font-size: 1.6em !important;
margin-bottom: 2rem;
color: #333;
}
.top_h3_title span {
display: block;
color: #e4007F;
font-size: 0.7em;
letter-spacing: 0.05em;
padding: 15px 0;
font-weight: normal;
}
/* section-2 */
.fixed-background {
background: url("../home/thatswhy_txt.svg"), url("../home/image_bg.jpg");
background-attachment: scroll, fixed;
background-size: 600px, cover;
background-position: -2% -5%, center;
background-repeat: no-repeat, no-repeat;
}
.section-2-container {
padding-top: 80px;
}
.section-2-container .sec2_container {
width: 85%;
margin: 0 auto;
}
.section_2 {
display: flex;
justify-content: space-around;
}
.section_2 .section_2_col {
width: 47%;
background: #fff;
border-radius: 20px;
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
}
.section_2 .section_2_col .section_2_col_inner {
padding: 2.5rem 3rem;
}
.section_2 .section_2_col .section_2_col_inner p {
margin-bottom: 1.5em;
padding: 0 1.5rem;
}
.section_2 h3 {
text-align: center;
background: #E4007F;
color: #fff;
padding: 12px 0;
border-radius: 20px 20px 0 0;
}
/* section-3 */
.section-3-container {
background: #ffeaf0 url("../home/joinus_txt.svg") no-repeat right 3rem;
background-size: 500px;
}
.worries_bg {
/*background: #ffffff;*/
padding: 4rem;
/*border-radius: 2rem;*/
/*border: 2px solid #ccc;*/
}
.section-3-container p{
padding-bottom: 1.5rem;
}
.top_h2_box {
padding: 2rem;
text-align: center;
}
h2.top_title {
font-size: 2em;
color: #333;
padding: 0px !important;
margin: 0 !important;
font-weight: bold;
}
h2.top_title span {
display: block;
color: #e4007F;
font-size: 0.6em;
letter-spacing: 0.05em;
font-weight: normal;
margin: 0 !important;
}
h3.top_catch_txt {
font-size: 1.3em;
color: #555;
padding-bottom: 20px !important;
text-align: center;
letter-spacing: 0.1em;
}
/* section-4 */
.section_4 .section-4-container {
padding: 5rem 0;
}
.section_4 .section-4-container ul.sec_4_row{
display: flex;
}
.section_4 .section-4-container ul.sec_4_row li p span{
display: block;
font-size: 0.7em;
color: #e4007F;
}
.image_box {
display: block;
}
.hover_t_2 {
position: relative;
}
.hover_t_2 li {
position: relative;
overflow: hidden;
background: #270e13;
}
.hover_t_2 li::before {
opacity: 0;
display: block;
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background:#270e13;
transition: 0.3s;
}
.hover_t_2 li img {
display: block;
width: 100%;
transition: 0.6s;
opacity: 0.6;
}
.hover_t_2 li figcaption {
opacity: 1;
transition: 0.3s;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: #fff;
}
.hover_t_2 li figcaption .txt_box {
position: relative;
width: 100%;
height: 100%;
}
.hover_t_2 li figcaption .txt_box > p {
width: 100%;
text-align:center;
position: absolute;
left: 25%;
top: 35%;
transform: translate(-50%, -50%);
font-size: 1.5em;
display: block;
font-weight: bold;
}
.hover_t_2:hover li::before {
opacity: 1;
}
.hover_t_2:hover li img {
opacity: 0.8;
filter: brightness(50%);
transform: scale(1.1);
}
.hover_t_2:hover li figcaption {
opacity: 1;
}
/* section-5 */
.section-5-container {
background: #ffffff url("../home/price_txt.svg") no-repeat right 3rem;
background-size: 500px;
}
.worries_bg {
background: #ffffff;
padding: 4rem;
border-radius: 2rem;
border: 2px solid #ccc;
}
.section-5-container p{
padding-bottom: 1.5rem;
}
.top_h2_box {
padding: 2rem;
text-align: center;
}
h2.top_title {
font-size: 2em;
color: #333;
padding: 0px !important;
margin: 0 !important;
font-weight: bold;
}
h2.top_title span {
display: block;
color: #e4007F;
font-size: 0.6em;
letter-spacing: 0.05em;
font-weight: normal;
margin: 0 !important;
}
h3.top_catch_txt {
font-size: 1.3em;
color: #555;
padding-bottom: 20px !important;
text-align: center;
letter-spacing: 0.1em;
}
/* 料金案内 */
.price_content{
display: flex;
}
.p-price__content_item p{
padding: 0;
margin: 0;
}
.p-price__content_item{
border: 2px solid #ccc;
}
.p-price__content_item:nth-of-type(1){
width: 33%;
border-right: none;
border-radius: 30px 0 0 30px;
}
.p-price__content_item:nth-of-type(2){
width: 34%;
}
.p-price__content_item:nth-of-type(3){
width: 33%;
border-left: none;
border-radius:0 30px 30px 0;
}
.p-price__content_item .p-member{
text-align: center;
padding: 0.8rem 0;
font-size: 1.2em;
font-weight: bold;
color: #333;
border-bottom: 1px solid #ccc;
}
.p-price__content_item_inner{
text-align: center;
padding: 1em 2rem;
}
.p-price__content_item_inner .p-price{
font-size: 2.7em;
font-weight: bold;
color: #333;
background:linear-gradient(transparent 60%, #ffedf7 60%);
display: inline-block;
font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
.p-price__content_item_inner .p-price span{
font-size: 0.4em;
margin-left: 0.5em;
font-weight: normal;
color: #333;
}
.p-price__content_item_inner .p-text{
text-align: left;
margin: 1rem 0;
}
.p-price__list_box{
background: #f5f5f5;
border-radius: 10px;
padding: 12px;
text-align: left;
font-size: 90%;
}
ul.p-price__list_text p {
border-bottom: 1px solid #ccc;
text-align: center;
margin-bottom: 0.5em;
}
ul.p-price__list_text li{
list-style: disc;
padding:0.2em 0;
margin-left: 2em;
line-height: 1.2;
}
.plus__icon__circle{
width: 50px;
height: 50px;
margin: 0.5rem auto;
line-height:50px;
background: #E4007F;
border-radius: 50%;
text-align: center;
color: #fff;
font-size: 1.5em;
}
.p-price2__content{
border: 2px solid #ccc;
padding: 1em;
border-radius: 30px;
}
.p-price2__content_item_inner{
text-align: center;
}
.p-price_txt{
font-size: 1.2em;
margin-right: 1em;
font-weight: bold;
}
.p-price2__content_item_inner .p-price{
font-size: 2.7em;
font-weight: bold;
color: #333;
background:linear-gradient(transparent 60%, #ffedf7 60%);
display: inline-block;
font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
padding: 0;
margin: 0;
}
.p-price2__content_item_inner .p-price span{
font-size: 0.4em;
margin-left: 0.5em;
margin-right: 0.5em;
font-weight: normal;
color: #333;
}
.p-price2__content_item_inner .p-price span.txt-m{
font-size: 0.8em;
}
.del{ /*金額訂正線*/
text-decoration-line: line-through;
text-decoration-style:double;
text-decoration-color: red;
}
/* タブレット */
@media screen and (max-width:1024px) {
/*news.html
---------------------------------------------------------------------------*/
/* 料金案内 */
.p-price__content_item_inner{
padding: 1em 1rem;
}
.p-price__content_item_inner .p-price{
font-size: 2em;
}
.p-price__list_box{
padding: 8px;
}
.p-price2__content_item_inner .p-price{
font-size: 2em;
}
}
/*======================================================*/
/* MOBILE(max-wdth 768px) */
/*======================================================*/
@media screen and (max-width: 768px) {
/* kv */
.kv {
min-width: 100%;
}
.kv .catch-copy { /*入れ物*/
top: 50px;
}
.kv .main-copy {
width: 400px;
}
.kv .sub-copy {
margin: 15px 0;
}
.video {
min-width: 100%;
height: 50vh;
}
/* section-1 */
.section-1-container {
width: 92%;
margin: 0 auto;
background: url("../home/aboutus_txt.svg") no-repeat right 95%;
background-size: 70%;
}
.section-1-container .container-full {
display: block;
}
.section_1-img {
width: 100%;
}
.section_1-txt {
width: 100%;
margin-top: 1.5rem;
}
.section-1-container .text-block {
width: 100%;
margin-right: auto;
margin-left: 0rem;
}
.section-1-container img {
border-radius: 0;
}
.top_h3_title {
margin-bottom: 0.5rem;
}
/* section-2 */
.fixed-background {
background-size: 70%, cover;
}
.section-2-container .sec2_container {
width: 98%;
}
.section_2 .section_2_col {
width: 49%;
box-shadow: none;
}
.section_2 .section_2_col .section_2_col_inner {
padding: 1rem 1.5rem;
}
/* 料金案内 */
.price_content{
display: block;
}
.p-price__content_item_inner{
text-align: center;
padding: 0 1.5rem 1em 1.5rem;
}
.p-price__content_item:nth-of-type(1){
width: 100%;
border-right: 2px solid #ccc;
border-radius: 30px 30px 0 0;
}
.p-price__content_item:nth-of-type(2){
width: 100%;
border-top:none;
}
.p-price__content_item:nth-of-type(3){
width: 100%;
border-top:none;
border-left:2px solid #ccc;
border-radius:0 0 30px 30px;
}
.p-price__content_item .p-member{
padding: 0.6rem 0;
color: #E4007F;
border-bottom:none;
}
}
/*======================================================*/
/* MOBILE(max-width : 599px) */
/*======================================================*/
@media screen and (max-width: 599px) {
/* Shiseikarute */
.shisei-karte{
margin-top: 0;
padding: 2rem 0;
}
.shisei-karte .area1{
padding: 0.5rem 0;
}
.shisei-karte .area1 p{
width: 94%;
line-height: 150%;
font-size: 1.3rem;
}
.shisei-karte .area2{
padding: 1.5rem 0;
}
.shisei-karte .area3{
padding: 0.5rem 0;
}
.shisei-karte .area3 p{
font-size: 1.6rem;
line-height: 150%;
}
/* video */
.video {
height: 80vh;
}
.shapedividers_com-1337::before {
display: none;
}
.video video {
max-height: 100%;
}
.kv .catch-copy { /*入れ物*/
position: absolute;
top: 70px;
}
.kv .main-copy {
width: 95%;
}
.kv .sub-copy {
width: 85%;
font-size: 1.1em;
letter-spacing: 0em;
margin: 30px auto;
}
.kv .banner-btn {
width: 80%;
margin: 0 auto;
}
.section-1-container {
background: url("../home/aboutus_txt.svg") no-repeat right 50%;
background-size: 80%;
}
/* section-2 */
.fixed-background {
background: url("../home/thatswhy_txt.svg"), url("../home/image_bg.jpg");
background-attachment: scroll, fixed;
background-size: 85%, cover;
background-position: -2% -3%, center;
background-repeat: no-repeat, no-repeat;
}
.section-2-container {
padding-top: 80px;
}
.section-2-container .sec2_container {
width: 94%;
margin: 0 auto;
}
.section_2 {
display: block;
justify-content: space-around;
}
.section_2 .section_2_col {
width: 100%;
margin-bottom: 15px;
}
.section_2 .section_2_col .section_2_col_inner {
padding: 1em 1.5em;
}
.section_2 h3 {
font-size: 1.1em;
padding: 10px 0;
}
/* section-3 */
.section-3-container {
background-size: 85%;
}
.section-3-container .section-3 {
width: 92%;
}
.worries_bg {
width: 100%;
margin: 0 auto;
background: #ffffff;
padding: 1rem 0.1rem 0 0.1rem;
border-radius: 2rem;
border: 2px solid pink;
}
.top_h2_box {
padding: 2rem;
text-align: center;
}
h2.top_title {
font-size: 1.5em;
line-height: 1.5;
}
.section_4 .section-4-container ul.sec_4_row{
display: block;
}
/* section-5 */
.section-5-container {
background-size: 85%;
}
.section-5-container .section-5 {
width: 92%;
}
.worries_bg {
width: 100%;
margin: 0 auto;
background: #ffffff;
padding: 1rem 0.1rem 0 0.1rem;
border-radius: 2rem;
border: 2px solid pink;
}
.top_h2_box {
padding: 2rem;
text-align: center;
}
h2.top_title {
font-size: 1.5em;
line-height: 1.5;
}
}