@charset "utf-8";

div#sb-site {
    padding: 91px 0 0;
}
a img:hover {
    opacity: 0.7;
}
/*---------------
  main
---------------*/
    main.plan-main {
    width: 100%;
    margin: 0 auto 10px;
    padding: 0;
}
  .plan-main p{
    letter-spacing: 2px;
    line-height: 2;
   }
/*---------------
 top-logo
---------------*/
   .h2-title {
    background-image: url(../images/main.webp);
    background-size: 100%,cover;
    position: relative;
    background-repeat: no-repeat;
    padding-bottom: 37vw;
    background-attachment: fixed;
    background-position-y: 5vw;
}
   h2.top-logo {
    position: absolute;
    bottom: 4vw;
    left: 0;
    right: 0;
    margin: auto;
}
   h2.top-logo img {
    width: 12vw;
}
   .h3-title {
    position: absolute;
    margin: auto;
    top: 20%;
    left: 0;
    right: 0;
}
    h3.h3-title img {
    width: 9vw;
}
/*---------------
  plan
---------------*/
div#plan {
    position: relative;
}
.top {
    background-image: url(../images/plan/back-plan.jpg);
    width: 100vw;
    height: 20vw;
    background-size: 40vw;
    background-position: 31vw;
    background-repeat: no-repeat;
    position: relative;
    margin: 0 auto;
   }
h4.intro {
    font-size: 20px;
}
span.intro {
    font-size: 20px;
}
.plan-outer,.oneday,.ceremony_photo {
    width: 95%;
    margin: 5% auto 0;
}
ul.plan-item_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2%;
}
ul.plan-item_list li {
    width: 43%;
    margin: 0 1%;
}
ul.plan-item_list p {
    font-size: 12px;
}
.oneday ul.plan-item_list li,
.ceremony_photo ul.plan-item_list li {
    width: 40%;
}
#plan h3 {
    color: #d91c40;
    font-size: 200%;
}
#plan .sub_txt {
    margin-bottom: 20px;
}
/*---------------
  reservation
---------------*/
ul.reservation-list li {
    width: 18%;
    display: inline-block;
    margin: 5% 1%;
}
/*---------------
  triangle
---------------*/
.point--triangle{
    position: relative;
    padding: 10% 0;
    overflow:hidden;
}
.point--triangle::before {
    content: " ";
    display: block;
    width: 100vw;
    height: 36vw;
    background-color: #ffecf2;
    -webkit-transform: rotate(21.8deg);
    -ms-transform: rotate(21.8deg);
    transform: rotate(-9.5deg);
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    position: absolute;
    top: 12vw;
    left: -23vw;
    border-top-right-radius: 35%;
-webkit-border-top-right-radius: 35%;
-moz-border-radius-topright: 35%;
}
.point--triangle::after {
    content: " ";
    display: block;
    width: 51vw;
    height: 32vw;
    background-color: #ffecf2;
    -webkit-transform: rotate(-21.8deg);
    -ms-transform: rotate(-21.8deg);
    transform: rotate(9deg);
    -webkit-transform-origin: right top;
    -ms-transform-origin: right top;
    transform-origin: right top;
    position: absolute;
    top: 7vw;
    right: -6vw;
    border-top-left-radius: 19%;
-webkit-border-top-left-radius: 19%;
-moz-border-radius-topleft: 19%;
}
/*---------------
  point
---------------*/
div#point {
    position: relative;
    padding-bottom: 5%;
    background-color: #ffecf2;
}
.point-main {
    width: 56vw;
    margin: -30% auto 3%;
    position: absolute;
    right: 23%;
    z-index: 1;
}
@media screen and (max-width:640px){
    .point-main {
    margin-top: -30%;
    left: 10%;
    }
div#plan {
    padding-bottom: 0;
}
div#point {
    padding-top: 20%;
}
}
.point-outer {
    margin: 0% auto 0%;
    width: 60vw;
}
.point-list__item {
    width: 14vw;
    display: inline-block;
    margin: 0 2% 2%;
    vertical-align: top
}
h4.number img {
    height: 2vw;
}
h4.number {
    margin-bottom: 5%;
}
.point-p{
    position: relative;
    height: 59px;
    width: 100%;
}
p.point-p-main {
    font-size: 19px;
    letter-spacing: 0;
    line-height: 1.2;
    font-weight: bold;
}
p.point-p_mini {
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
}
.column02{
    margin-top: 10%;
}
.column02.list07 {
    margin-top: 15%;
}
.column02.list08 {
    margin-top: 12%;
}

@media screen and (min-width:641px){
.point-p:before {
content: '';
position: absolute;
top: 50%;
left: -5%;
display: inline-block;
width: 44px;
height: 2px;
background-color: #f56793;
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
 .point-p:after{
content: '';
position: absolute;
top: 50%;
right: -5%;
display: inline-block;
width: 44px;
height: 2px;
background-color: #f56793;
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
}
}
/*---------------
  option
---------------*/
#option{
    position: relative;
    padding-bottom: 5%;
}
#option .bg-outer{margin-bottom: 3%;}
.option-title {
    background-image: url(../images/option/back-option.jpg);
    width: 100vw;
    height: 41.5vw;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
#option .h3-title {
    position: absolute;
    margin: auto;
    top: 40%;
    left: 0;
    right: 0;
}
ul.option-list{
    width: 90vw;/*２列時80vw*/
    margin:0 auto;
    padding-bottom: 5%;
}
.option-list__item{
    margin:0 5px;/*２列時1%*/
}
/*３列時用*/
#option .slick-prev {
    left: -4%;
}
#option .slick-next {
    right: -4%;
}
/*---------------
  present
---------------*/
#present{
    position: relative;
}
.present-title {
    background-image: url(../images/present/back-present.jpg);
    width: 100vw;
    height: 41.5vw;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    margin: 0 auto 3%;
}
#present .h3-title {
    position: absolute;
    margin: auto;
    top: 40%;
    left: 0;
    right: 0;
}
.present-inner {
    width: 65%;
    margin: 0 auto;
}
p.present-text {
    margin-top: 3%;
}
/*---------------
  link-plan
---------------*/
.link-price p.with_tax {
    font-size: 11px;
}
section {
    width: 985px;
    margin: 0 auto;
}
/*---------------
  other
---------------*/
.plan-link__item:nth-of-type(1){
    display: none;
}
span.green {
    font-size: 104%;
    color: #5da2aa;
    font-weight: bold;
}
/*---------------
  about
---------------*/
#plan_about{
    padding: 9vw 0;
    background: url(../images/back-about.jpg) no-repeat;
    background-attachment: fixed;
    background-size: 100%, cover;
}
#plan_about div {
    width: 80%;
    margin: 0 auto;
}
#plan_about h2 {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #333;
    padding: 0 0 8px;
    margin: 0 auto 3vw;
}
#plan_about p {
    margin: 0 auto 10px;
    text-align: left;
}
/*-------------------
online_counseling
--------------------*/
.onlin_counseling {
    margin: 0 auto 15%;
}

@media screen and (max-width:640px){
/*---------------
  main
---------------*/
div#sb-site {
    padding: 66px 0 0;
}
main.plan-main {
    width: 100%;
    margin: 0 auto 10px;
}
.plan-main p {
    letter-spacing: 1px;
    line-height: 1.3;
    font-size: 12px;
}
h2.top-logo {
    bottom: -10vw;
}
/*---------------
 top-logo
---------------*/
   .h2-title {
    background-image: url(../images/main_sp.webp);
    background-size: 100%,cover;
    position: relative;
    background-repeat: no-repeat;
    padding-bottom: 67vw;
    background-attachment: scroll;
    background-position-y:0;
}
   h2.top-logo img {
    width: 35vw;
}
/*---------------
  plan
---------------*/
.top{
    height: 30vw;
    background-size: contain;
    background-position: 16vw;
}
h3.h3-title img {
    width: 17vw;
}
h4.intro {
    font-size: 180%;
    margin-bottom: 3%;
    padding:0 3%;
}
span.intro {
    font-size: 150%;
}
.plan-outer {
    width: 100%;
    margin: 30px auto 0;
}
ul.plan-item_list li {
    width: 95%;
    display: block;
    margin: 0 auto 5%;
}
ul.plan-item_list p {
    font-size: 12px;
}
.oneday ul.plan-item_list li, .ceremony_photo ul.plan-item_list li {
    width: 40%;
    width: 95%;
    display: block;
    margin: 10% auto 0;
}
#plan h3 {
    margin-top: 30px;
}
#plan .sub_txt {
    margin-bottom: 10px;
}
#plan .oneday .sub_txt {
    margin-bottom: -20px;
}
/*---------------
  reservation
---------------*/
.reservation {
    margin: 5% auto;
    width: 90%;
}
ul.reservation-list li {
    width: 48%;
    margin: 5% auto;
}
ul.reservation-list li:first-child {
    margin: 5% 2% 5% 0;
}
/*---------------
  point
---------------*/
.point-main {
    width: 90vw;
}
.point-outer {
    width: 100vw;
    padding-bottom: 5%;
}
ul.point-list {
    width: 100vw;
    margin: 0 auto;
}
ul.point-list div {
    width: 100%;
}
.point-list__item{
        margin: 0 1%;
}
h4.number img {
    height: 6vw;
}
.point-p{
    height: 12vw;
}
p.point-p-main {
    font-size: 129%;
    letter-spacing: 0;
    line-height: 1.2;
    font-weight: bold;
}
p.point-p_mini {
    font-size: 60%;
    line-height: 1;
    letter-spacing: 0;
}
.slick-list{
    margin: 0 !important;
}
.column02,.column02.list07,.column02.list08{
    margin-top: 10%;
}
.point-p:before {
content: '';
position: absolute;
top:50%;
left: -12%;
display: inline-block;
width: 44px;
height: 2px;
background-color: #f56793;
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.point-p:after {
    content: '';
    position: absolute;
    right: -12%;
    display: inline-block;
    width: 44px;
    height: 2px;
    background-color: #f56793;
    -moz-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    transform: rotate(-60deg);
    top: 50%;
}
/*---------------
  triangle
---------------*/
.point--triangle {
    padding: 0% 0;
    overflow: hidden;
    height: 8vw;
}
/*---------------
  option
---------------*/
ul.option-list{
    width: 100vw;
}
.option-list__item {
    margin: 0;
}
.point-outer .slick-prev,.option-outer .slick-prev,.present-outer .slick-prev, .slick-prev{
    left: 0! important;
}
.point-outer .slick-next,.option-outer .slick-next,.present-outer .slick-next, .slick-next{
    right: 0! important;
}
.option-title {
    width: 100vw;
    height: 61vw;
    background-size: 150%;
    background-repeat: no-repeat;
    position: relative;
    background-position-x: 50%;
    margin: 0 auto 5%;
}
.option-outer{
    margin: 5% auto 0;
}
/*---------------
  present
---------------*/
.present-inner {
    width: 100%;
}
.present-title {
    width: 100vw;
    height: 61vw;
    background-size: 150%;
    background-repeat: no-repeat;
    position: relative;
    margin: 0 auto 5%;
    background-position-x: 62%;
}
p.present-text {
    margin: 5% auto;
}

section {
    width: 95%;
}
/*---------------
  about
---------------*/
#plan_about {
    background-attachment: scroll;
    background-size: cover;
    background-position-x: 50%;
}
#plan_about h2 {
    font-size: 16px;
    border-bottom: none;
    text-decoration: underline;
    margin: 0 auto 5vw;
    line-height: 1.5em;
}
#plan_about div {
    width: 100%;
}
#plan_about .mark_box {
    padding: 0 1%;
}
.plan-text {
    margin: 5% auto;
}
span.green {
    font-size: 104%;
    color: #5da2aa;
    font-weight: bold;
}
}
/*-----------------------
 comparison_sp
 -----------------------*/
@media screen and (max-width:640px){
    #comparison {
    margin: 10% auto 15%;
}
ul.tab02 {
    width: 97%;
    margin: 0 0 0 2.5%;
}
ul.tab02 li {
    width: 32%;
    font-size: 11px;
    font-weight: bold;
    float: left;
    background-color: #fff;
    color: #000;
    border: 1px solid #d3d1c5;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    margin: 0;
    padding: 8px 0;
}
ul.tab02 li.select {
    background-color: #e83335;
    color: #fff;
}
.comparison-box ul >li > div {
        overflow: auto;
        width: 95%;
        margin: 0 auto;
    }
    .comparison-box li table {
        width: 750px;
    }
    .comparison-box th,
    .comparison-box td {
        padding: 8px;
        text-align: center;
    }
.comparison-box th:first-child {
    width: 5%;
    color: #383838;
    background: #fef5f5;
    position: sticky;
    position: -webkit-sticky;
    left: 0;
    z-index: 1;
    border-left: none;
    border-right: none;
}
.comparison-box td.factory-ans,
.comparison-box th.factory-ans {
    border-left: none;
}
.comparison-box th:first-child:before {
    content: "";
    border-left: #d3d1c5 1px solid;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}
.comparison-box th:first-child:after {
    content: "";
    border-left: #d3d1c5 1px solid;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
}
/*-------------------
online_counseling
--------------------*/
.onlin_counseling {
    margin: 0 auto 35%;
}
}
#chart {
    margin-bottom: 50px;
}