@charset "UTF-8";
/* CSS Document */
/*common*/
#kyomana {
 color: #000;
}
#kyomana ul, #kyomana ul li {
 margin: 0;
 padding: 0;
}
#kyomana h2 {
 font-size: 28px;
 position: relative;
 margin: 0 0 50px 0 !important;
}
#kyomana h2::after {
 content: "";
 display: inline-block;
 width: 100%;
 height: 10px;
 background: url("../img/contents/kyomana/midashi-h2.png") no-repeat center;
 background-size: 100px;
 position: absolute;
 bottom: -20px;
 left: 0;
}
#kyomana p {
 font-size: 16px;
 letter-spacing: normal;
}
#kyomana section {
 padding: 70px 0;
 text-align: center;
}
/*main*/
#kyomana .main {
 width: 100%;
 background: url("../img/contents/kyomana/bg-main.jpg") 0 0 repeat;
 background-size: 55px;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 30px 0 0 0;
}
#kyomana h1 {
 margin-bottom: 30px;
}
#kyomana .main .copy {
 margin-bottom: 30px;
 margin-right: 30px;
}
#kyomana .main .copy-txt {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
}
#kyomana .main .copy-txt p {
 font-size: 18px;
 font-family: "Noto Sans JP", sans-serif;
}
#kyomana .main .copy-txt p b {
 color: #990000;
 font-weight: normal;
}
/*anchor*/
#kyomana ul.anchor {
 background: #990000;
 margin: 0;
 padding: 0;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
 text-decoration: none;
}
#kyomana ul.anchor li {
 padding: 0 20px;
 border-right: 1px solid #fff;
 margin: 10px 0;
}
#kyomana ul.anchor li:last-child {
 border-right: none;
}
#kyomana ul.anchor li a {
 color: #fff;
 text-decoration: none;
 background: url(../img/contents/kyomana/arrow-white.png) 100% 50% no-repeat;
 background-size: 10px;
 padding-right: 15px;
}
/*about*/
#kyomana #about {
 background: url("../img/contents/kyomana/bg-white.jpg") 0 0 repeat;
 background-size: 100px;
}
#kyomana #about ul.about-point {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
 margin-bottom: 30px;
}
#kyomana #about ul.about-point li {
 margin: 0 25px;
}
#kyomana #about p small {
 font-size: 14px;
 color: #666;
}
/*support*/
#kyomana #support {}
#kyomana #support h2 {
 margin: 0 0 20px 0 !important;
}
#kyomana #support h3 {
 color: #990000;
 position: relative;
 display: inline-block;
}
#kyomana #support h3::after {
 content: "";
 display: inline-block;
 width: 100%;
 height: 47px;
 background: url(../img/contents/kyomana/midashi-support.png) no-repeat right;
 background-size: 20px;
 position: absolute;
 bottom: -5px;
 right: -15px;
}
#kyomana #support h3::before {
 content: "";
 display: inline-block;
 width: 100%;
 height: 47px;
 background: url(../img/contents/kyomana/midashi-support.png) no-repeat right;
 background-size: 20px;
 transform: scale(-1, 1);
 position: absolute;
 bottom: -5px;
 right: 25px;
}
#kyomana #support .support-point {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
 margin: 30px auto;
}
#kyomana #support .support-point li {
 padding: 0 15px;
}
/*flow*/
#kyomana #flow {
 background: url("../img/contents/kyomana/bg-green.jpg") 0 0 repeat;
 background-size: 100px;
 position: relative;
}
#kyomana #flow::before {
 content: "";
 display: inline-block;
 width: 100%;
 height: 218px;
 background: url("../img/contents/kyomana/bg-sakura1.png") no-repeat left;
 background-size: 253px;
 position: absolute;
 top: 0;
 left: 5%;
}
#kyomana #flow::after {
 content: "";
 display: inline-block;
 width: 100%;
 height: 209px;
 background: url("../img/contents/kyomana/bg-sakura2.png") no-repeat right;
 background-size: 252px;
 position: absolute;
 bottom: 0;
 right: 5%;
}
#kyomana #flow .flow-point {}
#kyomana #flow .flow-point li {
 background: #fff;
 border-radius: 50px;
 margin: 0 auto;
 padding: 10px 20px;
 margin-bottom: 30px;
 width: 550px;
 text-align: left;
 position: relative;
}
#kyomana #flow .flow-point li::after {
 content: "";
 display: inline-block;
 width: 100%;
 height: 12px;
 background: url(../img/contents/kyomana/arrow-green.png) no-repeat 0 0;
 background-size: 20px;
 position: absolute;
 bottom: -20px;
 left: calc(50% - 10px);
}
#kyomana #flow .flow-point li:last-child::after {
 content: none;
}
#kyomana #flow .flow-point li span {
 font-size: 24px;
 color: #9ad23a;
 margin-right: 15px;
}
#kyomana #flow .btn {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}
#kyomana #flow .btn img {
 width: 150px;
 margin-bottom: 5px;
}
#kyomana #flow .btn a {
 width: 400px;
 font-size: 20px;
 color: #fff;
 background: #00b900;
 border: 2px solid #fff;
 box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
 border-radius: 50px;
 padding: 20px;
 text-decoration: none;
}
/*notice*/
#kyomana #notice {
 background: #fff;
 padding: 70px 0 0;
}
#kyomana #notice .notice-news {
 border: 1px solid;
 border-radius: 20px;
 width: 1000px;
 margin: 0 auto 50px;
 padding: 30px;
 color: #990000;
}
#kyomana #notice .notice-news h3 {
 margin: 0 0 10px 0;
 display: flex;
 align-items: center;
 justify-content: center;
}
#kyomana #notice .notice-news h3 img {
 margin-right: 5px;
}
#kyomana #notice .notice-info {
 background: url("../img/contents/kyomana/bg-blue.jpg") 0 0 repeat;
 background-size: 100px;
}
#kyomana #notice .notice-pay {
 margin-bottom: 50px;
}
#kyomana #notice .notice-pay p {
 margin-bottom: 10px;
}
#kyomana #notice .notice-pay span {
 color: #000;
 border: 1px solid #000;
 padding-bottom: 0;
 font-weight: normal;
 padding: 1px 12px;
 margin-right: 10px;
 font-size: 15px;
}
#kyomana #notice .notice-info .info {
 display: flex;
 align-items: stretch;
 justify-content: space-between;
 width: 1000px;
 margin: 0 auto !important;
 padding: 70px 0;
}
#kyomana #notice .notice-info .info li {
 width: 48%;
 padding: 0 0 30px;
 background: #fff;
 border-radius: 20px;
 box-sizing: border-box;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}
#kyomana #notice .notice-info .info li h3 {
 background: #78c0cf;
 padding: 20px;
 color: #fff;
 margin: 0;
 border-radius: 20px 20px 0 0;
}
#kyomana #notice .notice-info .info li h4 {
 font-weight: bold;
 font-size: 18px;
 border-bottom: 1px solid;
 margin: 30px 30px 30px;
}
#kyomana #notice .notice-info .info li p {
 padding: 0 30px;
 text-align: left;
}
#kyomana #notice .notice-info .info li p a {
 color: #78c0cf;
}
#kyomana #notice .notice-info .info li .btn {
 margin-top: auto;
}
#kyomana #notice .notice-info .info li .btn a {
 color: #fff;
 background: #990000;
 padding: 15px;
 width: 320px;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 30px auto 0;
 border-radius: 50px;
 box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
 text-decoration: none;
}
#kyomana #notice .notice-info .info li .btn a img {
 width: 20px;
 margin-right: 5px;
}
#kyomana #notice .notice-info li.info-order {
 position: relative;
}
#kyomana #notice .notice-info li.info-order::before {
 content: "";
 display: inline-block;
 width: 100%;
 height: 46px;
 background: url(../img/contents/kyomana/info-order.png) no-repeat 0 0;
 background-size: 217px;
 position: absolute;
 top: -30px;
 left: calc(50% - 109px);
}
/*price*/
#kyomana #price {
 background: url("../img/contents/kyomana/bg-orange.jpg") 0 0 repeat;
 background-size: 100px;
 position: relative;
}
#kyomana #price::before {
 content: "";
 display: inline-block;
 width: 100%;
 height: 218px;
 background: url("../img/contents/kyomana/bg-sakura1.png") no-repeat left;
 background-size: 253px;
 position: absolute;
 top: 0;
 left: 5%;
}
#kyomana #price::after {
 content: "";
 display: inline-block;
 width: 100%;
 height: 209px;
 background: url("../img/contents/kyomana/bg-sakura2.png") no-repeat right;
 background-size: 252px;
 position: absolute;
 bottom: 0;
 right: 5%;
}
#kyomana #price .price-point {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
 background: #fff;
 width: 1000px;
 margin: 50px auto 0;
 border-radius: 20px;
 padding: 30px;
 position: relative;
}
#kyomana #price .price-point:before {
 content: "";
 position: absolute;
 top: -30px;
 left: 50%;
 margin-left: -15px;
 border: 15px solid transparent;
 border-bottom: 15px solid #fff;
}
#kyomana #price .price-point p {
 font-family: "Noto Sans JP", sans-serif;
 font-size: 20px;
 color: #c0871a;
 margin-right: 40px;
}
#kyomana #price .price-point ul li {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: flex-start;
 text-align: left;
 line-height: 140%;
 margin-bottom: 20px;
}
#kyomana #price .price-point ul li:last-child {
 margin-bottom: 0;
}
#kyomana #price .price-point ul li p {
 font-size: 16px;
 color: #000;
 margin-right: 0;
}
#kyomana #price .shizuoka-txt img {
 width: 260px;
 margin-bottom: 10px;
}
#kyomana #price .shizuoka-img {
 margin: 30px auto 10px;
}
#kyomana #price .arrow-bottom {
 width: 100px;
}
#kyomana #price .kyomana-txt img {
 width: 260px;
 margin: 20px 0 10px;
}
/*faq*/
#kyomana #faq {
 background: url("../img/contents/kyomana/bg-green.jpg") 0 0 repeat;
 background-size: 100px;
}
/*アコーディオン*/
#kyomana #faq .accordion {
 width: 800px;
 margin: 0 auto;
}
#kyomana #faq .toggle {
 display: none;
}
#kyomana #faq .Label { /*タイトル*/
 padding: 30px 0;
 display: block;
 background: #84c153;
 border-radius: 30px;
 font-size: 18px;
 font-weight: 500;
}
#kyomana #faq .Label { /*タイトル*/
 background: #84c153;
}
#kyomana #faq .Label p {
 padding: 15px 0;
 text-indent: -2em;
 margin-left: 2em;
 color: #fff;
 font-size: 18px;
}
#kyomana #faq .Label p::before {
 content: 'Q.';
 color: #fff;
 font-size: 24px;
 font-weight: 500;
 margin-right: 10px;
}
#kyomana #faq .Label::before { /*タイトル横の矢印*/
 content: "";
 width: 10px;
 height: 10px;
 border-top: 2px solid #fff;
 border-right: 2px solid #fff;
 -webkit-transform: rotate(45deg);
 position: absolute;
 top: calc(50% - 5px);
 right: 30px;
 transform: rotate(135deg);
}
#kyomana #faq .Label, #kyomana #faq .content {
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 transform: translateZ(0);
 transition: all 0.3s;
 border-radius: 30px;
 text-align: left;
 padding: 0 30px;
}
#kyomana #faq .content { /*本文*/
 height: 0;
 margin-bottom: 20px;
 overflow: hidden;
}
#kyomana #faq .content p {
 padding: 20px 0 20px 2em;
 font-size: 16px;
 line-height: 160%;
}
#kyomana #faq .content h3 {
 font-size: 18px;
 padding: 0 0 0 2em;
 margin: 20px 0 0;
 line-height: 140%;
}
#kyomana #faq .toggle:checked + .Label { /*開閉時*/
 border-radius: 30px 30px 0 0;
 transition: all .3s;
}
#kyomana #faq .toggle:checked + .Label p { /*開閉時*/
 border-bottom: 1px solid #cccccc;
}
#kyomana #faq .toggle:checked + .Label + .content { /*開閉時*/
 height: auto;
 padding: 0 30px;
 transition: all .3s;
 background: #84c153;
 border-radius: 0 0 30px 30px;
 position: relative;
}
#kyomana #faq .toggle:checked + .Label + .content { /*開閉時*/
 background: #fff;
}
#kyomana #faq .toggle:checked + .Label + .content::before {
 content: 'A.';
 color: #84c153;
 font-size: 24px;
 font-weight: 500;
 margin-right: 10px;
 top: 15px;
 position: absolute;
}
#kyomana #faq .toggle:checked + .Label::before {
 transform: rotate(-45deg) !important;
}
/*flex-content*/
#kyomana #faq .content.flex-content {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
}
#kyomana #faq .content.flex-content .txt {
 width: 50%;
 margin-right: 5%;
}
#kyomana #faq .content.flex-content .img {
 width: 45%;
}
/*access*/
#kyomana #access .flex-access {
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: left;
 width: 1000px;
 margin: 0 auto;
}
#kyomana #access .flex-access .txt {
 margin-right: 30px;
}
#kyomana #access .flex-access h3 {
 font-size: 20px;
 color: #9b0505;
 margin: 0 0 10px 0;
}
#kyomana #access p.b-txt {
 margin: 20px 0 5px;
}
#kyomana #access .map iframe {
 width: 450px;
 height: 350px;
}
#kyomana p.copylight {
 background: #9b0505;
 color: #fff;
 text-align: center;
 font-size: 14px !important;
}
#container.page {
 margin-bottom: 0 !important;
 margin-top: 50px;
}