@charset "utf-8";
/* ===================================================================
CSS
 file name  :  top.css
=================================================================== */
@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}
.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #e5f6ff;
    z-index: 1;
}
.background span {
    width: 27vmin;
    height: 27vmin;
    border-radius: 27vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 43;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.background span:nth-child(0) {
    color: #d1edff;
    top: 25%;
    left: 59%;
    animation-duration: 73s;
    animation-delay: -39s;
    transform-origin: 2vw 20vh;
    box-shadow: 54vmin 0 7.522375664945307vmin currentColor;
}
.background span:nth-child(1) {
    color: #ffffff;
    top: 31%;
    left: 17%;
    animation-duration: 29s;
    animation-delay: -67s;
    transform-origin: 11vw 24vh;
    box-shadow: 54vmin 0 7.453747748608022vmin currentColor;
}
.background span:nth-child(2) {
    color: #ffffff;
    top: 60%;
    left: 99%;
    animation-duration: 10s;
    animation-delay: -44s;
    transform-origin: 22vw 23vh;
    box-shadow: 54vmin 0 7.05577377390429vmin currentColor;
}
.background span:nth-child(3) {
    color: #d1edff;
    top: 35%;
    left: 14%;
    animation-duration: 16s;
    animation-delay: -51s;
    transform-origin: 15vw -1vh;
    box-shadow: -54vmin 0 6.845795948914737vmin currentColor;
}
.background span:nth-child(4) {
    color: #ffffff;
    top: 45%;
    left: 31%;
    animation-duration: 51s;
    animation-delay: -39s;
    transform-origin: 4vw 23vh;
    box-shadow: -54vmin 0 7.567744696717408vmin currentColor;
}
.background span:nth-child(5) {
    color: #d1edff;
    top: 72%;
    left: 62%;
    animation-duration: 41s;
    animation-delay: -42s;
    transform-origin: 11vw 21vh;
    box-shadow: -54vmin 0 7.738863782407124vmin currentColor;
}
.background span:nth-child(6) {
    color: #d1edff;
    top: 44%;
    left: 13%;
    animation-duration: 74s;
    animation-delay: -65s;
    transform-origin: -2vw -21vh;
    box-shadow: 54vmin 0 6.883132728603261vmin currentColor;
}
.background span:nth-child(7) {
    color: #d1edff;
    top: 25%;
    left: 50%;
    animation-duration: 70s;
    animation-delay: -59s;
    transform-origin: -19vw 0vh;
    box-shadow: 54vmin 0 7.27168403676918vmin currentColor;
}
.background span:nth-child(8) {
    color: #ffffff;
    top: 69%;
    left: 70%;
    animation-duration: 8s;
    animation-delay: -42s;
    transform-origin: -24vw -24vh;
    box-shadow: 54vmin 0 7.484759538355657vmin currentColor;
}
.background span:nth-child(9) {
    color: #ffffff;
    top: 21%;
    left: 69%;
    animation-duration: 13s;
    animation-delay: -62s;
    transform-origin: 15vw -18vh;
    box-shadow: 54vmin 0 7.580509692125076vmin currentColor;
}
.background span:nth-child(10) {
    color: #ffffff;
    top: 43%;
    left: 56%;
    animation-duration: 7s;
    animation-delay: -70s;
    transform-origin: -5vw -20vh;
    box-shadow: -54vmin 0 6.961252962580723vmin currentColor;
}
.background span:nth-child(11) {
    color: #d1edff;
    top: 54%;
    left: 48%;
    animation-duration: 28s;
    animation-delay: -48s;
    transform-origin: -22vw -12vh;
    box-shadow: 54vmin 0 6.80563571951482vmin currentColor;
}
.background span:nth-child(12) {
    color: #d1edff;
    top: 43%;
    left: 37%;
    animation-duration: 64s;
    animation-delay: -42s;
    transform-origin: 20vw -12vh;
    box-shadow: 54vmin 0 7.376464845420847vmin currentColor;
}
.background span:nth-child(13) {
    color: #d1edff;
    top: 83%;
    left: 1%;
    animation-duration: 33s;
    animation-delay: -19s;
    transform-origin: -2vw 12vh;
    box-shadow: 54vmin 0 7.665482894961709vmin currentColor;
}
.background span:nth-child(14) {
    color: #ffffff;
    top: 72%;
    left: 76%;
    animation-duration: 75s;
    animation-delay: -55s;
    transform-origin: -12vw 17vh;
    box-shadow: -54vmin 0 7.5710144374423605vmin currentColor;
}
.background span:nth-child(15) {
    color: #d1edff;
    top: 40%;
    left: 5%;
    animation-duration: 38s;
    animation-delay: -34s;
    transform-origin: -22vw -5vh;
    box-shadow: -54vmin 0 6.9421378785944805vmin currentColor;
}
.background span:nth-child(16) {
    color: #d1edff;
    top: 75%;
    left: 10%;
    animation-duration: 53s;
    animation-delay: -38s;
    transform-origin: 2vw 8vh;
    box-shadow: 54vmin 0 7.362813435664698vmin currentColor;
}
/* =====================================
メイン
======================================== */
@media print, screen and (min-width: 769px) {
    .main_wrap{
        margin: auto;
        padding: 60px 50px 0 50px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .main_wrap .main_text{
        width: 50%;
        max-width: 600px;
    }
    .main_wrap .main_image{
        width: 50%;
        padding-left: 20px;
    }
}
.main_wrap .main_text h1{
    font-size: 2.4rem;
    line-height: 1.6;
    font-weight: 600;
    color: #392324;
}
.main_wrap .main_text h1 span{
    font-size: 3.4rem;
}
.main_wrap .main_text p{
    margin-top: 3em;
	font-weight: 400;
}
.news_wrap{
    max-width: 1180px;
    margin: 60px auto auto;
    padding: 0 50px 120px 50px;
}
.news_wrap .news_box{
    background: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2);
    padding: 1.2em 3em;
}
.news_wrap .news_box .news_title{
    color: #392324;
    font-weight: 700;
    position: relative;
    padding-right: 4em;
}
.news_wrap .news_box .news_title::after{
    position: absolute;
    top: 0;
    height: 20px;
    content: '';
    border-right: solid 1px;
    right: 2em;
    transform: rotate(40deg);
}
.news_wrap .news_box .under_red{
    color: #E80000;
    border-bottom: 1px solid #E80000;
}
@media screen and (max-width: 768px) {
    .main_wrap{
        padding: 50px 30px 0 30px;
    }
    .main_wrap .main_text h1{
        font-size: 2.2rem;
        text-align: center;
    }
    .main_wrap .main_text h1 span{
        font-size: 3.0rem;
    }
    .main_wrap .main_text p{
        text-align: center;
    }
    .main_wrap .main_image{
        max-width: 480px;
        margin: 40px auto auto;
    }
    .news_wrap{
        margin: 40px auto auto;
        padding: 0 50px 80px 50px;
    }
    .news_wrap .news_box{
        padding: 1.5em 2em;
    }
    .news_wrap .news_box .news_title{
        padding-right: 3em;
    }
    .news_wrap .news_box .news_title::after{
        top: 2px;
        height: 16px;
        right: 1.5em;
    }
}
@media screen and (max-width: 480px) {
    .main_wrap{
        padding: 30px 20px 0 20px;
    }
    .main_wrap .main_text h1{
        font-size: 1.6rem;
    }
    .main_wrap .main_text h1 span{
        font-size: 2.1rem;
        font-weight: 700;
    }
    .main_wrap .main_image{
        margin: 40px auto auto;
    }
    .news_wrap{
        margin: 40px auto auto;
        padding: 0 20px 70px 20px;
    }
    .news_wrap .news_box .news_title::after{
        height: 12px;
    }
}

.top_bg_white{
    background: #FFFFFF;
}
.top_bg_gray{
    background: #F5F5F5;
}
.top_contents_wrap{
    max-width: 1180px;
    padding: 100px 50px;
    margin: auto;
}
.top_contents_wrap.last{
    padding: 100px 50px 200px 50px;
}
h2.top_sub_title{
    color: #392324;
    font-size: 4.2rem;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
}
@media screen and (max-width: 768px) {
    .top_contents_wrap{
        padding: 80px 50px;
    }
    .top_contents_wrap.last{
        padding: 80px 50px 160px 50px;
    }
    h2.top_sub_title{
        font-size: 3.2rem;
    }
}
@media screen and (max-width: 480px) {
    .top_contents_wrap{
        padding: 70px 20px;
    }
    .top_contents_wrap.last{
        padding: 70px 20px 120px 20px;
    }
    h2.top_sub_title{
        font-size: 2.4rem;
    }
}
/* =====================================
SERVICE
======================================== */
.service_text{
    margin-top: 60px;
}
.service_text p{
    margin-top: 2em;
    text-align: center;
    font-weight: 400;
}
@media print, screen and (min-width: 769px) {
    ul.service_plan{
        margin-top: 60px;
        display: flex;
        justify-content: space-between;
    }
    ul.service_plan li{
        width: 30%;
    }
}
ul.service_plan li{
    background: #FFFFFF;
    border-radius: 5px;
    box-shadow: 5px 10px 30px 0px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}
ul.service_plan li .plan_title{
    background: #DDF3FF;
    padding: 40px 20px;
    text-align: center;
    color: #4D3C3C;
}
ul.service_plan li .plan_title h3{
    font-size: 1.2rem;
    position: relative;
    line-height: 1.6;
    padding-bottom: 15px;
}
ul.service_plan li .plan_title h3 span{
    display: block;
    font-size: 2.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
}
ul.service_plan li .plan_title h3::before {
  background-color: #4D3C3C;
  bottom: 0;
  content: "";
  height: 1px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 30px;
}
ul.service_plan li .plan_title .plan_subtitle{
    margin-top: 20px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.4;
}
ul.service_plan li .plan_price{
    background: #EDF8FF;
    color: #3895C7;
    text-align: center;
    padding: 15px 10px;
    line-height: 1;
}
ul.service_plan li .plan_price .price{
    font-size: 3.4rem;
    font-weight: 600;
}
ul.service_plan li .plan_price .price span{
    font-size: 2.8rem;
}
ul.service_plan li .plan_price .tax{
    font-weight: 500;
    font-size: 1.0rem;
}
ul.service_plan li .plan_detail{
    padding: 30px;
    font-size: 1.4rem;
}
ul.service_plan li .plan_detail h4{
    font-weight: 600;
}
ul.service_plan li .plan_detail h4:not(:first-child){
    margin-top: 1em;
}
.plan_attention{
    margin-top: 50px;
    font-size: 1.2rem;
}
@media screen and (max-width: 768px) {
    .service_text{
        margin-top: 40px;
    }
    .service_text p{
        text-align: left;
    }
    ul.service_plan{
        max-width: 420px;
        margin: auto;
    }
    ul.service_plan li{
        margin-top: 30px;
        box-shadow: 3px 7px 25px 0px rgba(0, 0, 0, 0.16);
    }
    ul.service_plan li .plan_title{
        padding: 30px 20px;
    }
    ul.service_plan li .plan_title h3{
        padding-bottom: 12px;
    }
    ul.service_plan li .plan_title .plan_subtitle{
        margin-top: 12px;
    }
    .plan_attention{
        margin-top: 30px;
    }
}
@media screen and (max-width: 480px) {
    .service_text{
        margin-top: 30px;
    }
    .service_text p{
        text-align: left;
    }
    ul.service_plan{
        max-width: 300px;
        margin: auto;
    }
    ul.service_plan li .plan_title h3 span{
        font-size: 2.2rem;
    }
    ul.service_plan li .plan_title .plan_subtitle{
        font-size: 1.2rem;
    }
    ul.service_plan li .plan_detail{
        font-size: 1.2rem;
    }
    .plan_attention{
        margin-top: 30px;
        font-size: 1.0rem;
    }
}
/* =====================================
ABOUT
======================================== */
.about_list{
    max-width: 940px;
    margin: 60px auto auto;
    border-top: 1px solid #CCCCCC;
}
.about_list dt{
    color: #392324;
    font-weight: 600;
    padding: 2em 0.5em;
}
.about_list dd{
    font-weight: 400;
    margin-top: -6em;
    padding: 2em 0.5em 2em 28%;
    border-bottom: 1px solid #CCCCCC;
}
@media screen and (max-width: 768px) {
    .about_list{
        margin: 40px auto auto;
    }
}
@media screen and (max-width: 480px) {
    .about_list{
        margin: 30px auto auto;
    }
    .about_list dt{
        padding: 1.5em 0.5em 0.5em 0.5em;
    }
    .about_list dd{
        margin-top: 0;
        padding: 0 0.5em 1.5em 0.5em;
    }
}
/* =====================================
WORK STYLE
======================================== */
@media print, screen and (min-width: 769px) {
    .ws_box{
        margin-top: 100px; 
        display: flex;
        justify-content: space-between;
    }
    .ws_box .text,
    .ws_box .image{
        width: 50%;
    }
    .ws_box .text{
        padding-right: 3.7%;
    }
    .ws_box .image{
        padding-left: 3.7%;
    }
    .ws_box.flex_direction{
        flex-direction: row-reverse;
    }
    .ws_box.flex_direction .text{
        padding-right: 0;
        padding-left: 3.7%;
    }
    .ws_box.flex_direction .image{
        padding-left: 0;
        padding-right: 3.7%;
    }
}
.ws_box h2{
    font-size: 3.2rem;
    color: #4D3C3C;
    line-height: 1;
}
.ws_box .text p{
    margin-top: 2em;
}
.ws_box .image img{
    width: 100%;
    height: 100%;
    max-height: 460px;
    object-fit: cover;
    box-shadow: 12px 12px 30px 0px rgba(0, 0, 0, 0.16);
}
@media screen and (max-width: 768px) {
    .ws_box .text{
        margin-top: 60px;
    }
    .ws_box .image{
        margin-top: 30px;
    }
    .ws_box h2{
        font-size: 2.4rem;
        text-align: center;
    }
    .ws_box .image img{
        max-height: 360px;
    }
}
@media screen and (max-width: 480px) {
    .ws_box .text{
        margin-top: 50px;
    }
    .ws_box .image{
        margin-top: 20px;
    }
    .ws_box h2{
        font-size: 1.6rem;
    }
    .ws_box .image img{
        max-height: 200px;
    }
}