@charset "UTF-8";
/*共有クラス------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400&display=swap");
.center-block { display: block; width: 1000px; max-width: 96%; margin: 0 auto; }

.center-content { width: 800px; max-width: 96%; margin: 0 auto; }

.w60p { width: 60%; }

.w80p { width: 80%; }

.margin_10_auto { margin: 10px auto !important; }

.margin_10_auto_0 { margin: 10px auto 0 !important; }

.margin_20_auto_0 { margin: 20px auto 0 !important; }

.margin_20_0 { margin: 20px 0 !important; }

.margin_20_auto { margin: 20px auto !important; }

.margin_0_auto { margin: 0 auto !important; }

.padding10 { padding: 10px !important; }

.padding20 { padding: 20px !important; }

.padding10_0 { padding: 20px 0 !important; }

.padding20_0 { padding: 20px 0 !important; }

.text_center { text-align: center !important; }

.text_left { text-align: left !important; }

.text_right { text-align: right !important; }

.fff { color: #fff !important; }

.ccc { color: #ccc !important; }

.gry1 { color: #222 !important; }

.brw1 { color: #be9532 !important; }

.brw3 { color: #7d400b !important; }

.yel3 { color: #ebe1b5 !important; }

.red1 { color: #bf2868 !important; }

.red3 { color: #c50404 !important; }

.blu1 { color: #45abbf !important; }

.f-80 { font-size: 80% !important; }

.f-90 { font-size: 90% !important; }

.f-110 { font-size: 110% !important; }

.f-120 { font-size: 120% !important; }

.f-140 { font-size: 140% !important; }

.f-150 { font-size: 150% !important; }

.f-italic { font-style: italic; }

.border_none { border: none !important; }

.display_no { display: none !important; }

.block { display: block !important; }

.inline-block { display: inline-block !important; }

.inline { display: inline !important; }

.flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

/*--------画像サイズ調整---------*/
.slick-slide img { display: inline-block; }

/*-----------height調整----------*/
.slick-slide { height: auto !important; }

/*------------------------------*/
/*-----------矢印表示----------*/
.slick-next { right: 0 !important; }

.slick-prev { left: 0 !important; }

.slick-arrow { width: initial !important; height: initial !important; z-index: 2 !important; }

.slick-arrow:before { font-size: 30px !important; color: #76020d !important; }

* { margin: 0; padding: 0; border: none; text-decoration: none; list-style: none; vertical-align: baseline; background: transparent; outline: none; word-break: break-word; line-height: inherit; font: inherit; -webkit-box-sizing: border-box; box-sizing: border-box; }

html { overflow-y: scroll; height: 100%; font-size: 16px; }

body { height: 100%; word-break: break-all; word-wrap: break-word; overflow-wrap: break-word; font-weight: normal; font-family: 'Noto Serif JP', serif; line-height: 1.6; }

input[type=checkbox] { display: none; }

img { max-width: 100%; vertical-align: middle; }

b { font-weight: bold; }

a, button { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; cursor: pointer; }

.wrap { width: 100%; min-height: 100%; position: relative; padding-bottom: 90px; overflow: hidden; background: #222; }

.fadein { top: 0; opacity: 1; }

.fadeout { top: -100px; opacity: 0; }

.form1 { max-width: 1000px; margin: auto; background: url(../../images/commit/form-bg1.jpg) center center no-repeat; background-size: cover; padding: 50px 10px; text-align: center; }

.form1 img { width: 96%; max-width: 500px; }

.form1 .line-button { max-width: 500px; display: block; margin: 10px auto 50px; position: relative; }

.form1 .line-button .finger { display: block; width: 65px; height: 85px; position: absolute; right: 100vw; bottom: -45px; }

.form1 .line-button .finger img { opacity: 0; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; }

@-webkit-keyframes click { 0% { right: 100vw; }
  90% { right: -10px; }
  100% { right: -10px; } }

@keyframes click { 0% { right: 100vw; }
  90% { right: -10px; }
  100% { right: -10px; } }

.form1 .line-button .finger-in { right: -10px; -webkit-animation: click .8s ease 0s 1 normal forwards; animation: click .8s ease 0s 1 normal forwards; }

.form1 .line-button .finger-in img { opacity: 1; }

.form1 .form-text-style1 { text-align: center; color: #ee004e; font-size: 1.6rem; text-shadow: 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff, 2px 0px 1px #fff, 0px 2px 1px #fff, -2px 0px 1px #fff, 0px -2px 1px #fff !important; }

.form1 .input-style { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 5px 0; max-width: 600px; margin: auto; }

.form1 .input-style input[type="email"] { -webkit-box-flex: 1; -ms-flex: 1 1 70%; flex: 1 1 70%; width: 70%; padding: 10px 5px; background: url(../../images/commit/form-button.jpg) center center no-repeat; background: #fff; border: 2px solid #be9532; font-size: 80%; }

.form1 .input-style button { width: 28%; -webkit-box-flex: 0; -ms-flex: 0 0 28%; flex: 0 0 28%; max-width: 130px; margin-left: 10px; }

.form1 .form-check { display: block; font-size: 80%; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; display: inline-block; padding: 5px 30px; width: auto; color: #fff; text-shadow: 0 0 5px #000, -1px -1px 3px #000, 1px 1px 3px #000; }

.form1 .form-check::before { background: #fff; border: 1px solid #231815; content: ''; display: block; height: 16px; left: 5px; margin-top: -8px; position: absolute; top: 50%; width: 16px; }

.form1 .form-check::after { border-right: 3px solid #45abbf; border-bottom: 3px solid #45abbf; content: ''; display: block; height: 9px; left: 10px; margin-top: -7px; opacity: 0; position: absolute; top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); width: 5px; }

.form1 input[type=checkbox]:checked + .form-check::after { opacity: 1; }

.form1 .attention { color: #fff; font-size: .7rem; text-align: left; display: inline-block; }

/*header------------------------------------*/
header { position: fixed; top: 0; left: 0; z-index: 1000; height: 70px; width: 100%; background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#333)); background: -webkit-linear-gradient(#000, #333); background: -o-linear-gradient(#000, #333); background: linear-gradient(#000, #333); overflow: hidden; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; }

header .centerblock { width: 100%; max-width: 1000px; margin: 0 auto; position: relative; }

header .centerblock h1 { padding: 5px; }

header .centerblock h1 img { width: 153px; height: 60px; }

header .centerblock .login { display: block; float: right; width: 70px; height: 70px; text-align: center; background: #45abbf url(../../images/commit/key.png) center 10px no-repeat; background-size: 35px; color: #fff; padding-top: 45px; font-size: 12px; }

header .centerblock #login { display: none; }

.modal { position: fixed; top: -200vh; left: 0; z-index: 10000; width: 100vw; height: 100vh; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; background: #000; }

.modal label[for="login"] { display: block; color: #fff; border-top: 1px solid #000; border-bottom: 1px solid rgba(255, 255, 255, 0.2); text-align: center; line-height: 35px; background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#000)); background: -webkit-linear-gradient(#222 0%, #000 100%); background: -o-linear-gradient(#222 0%, #000 100%); background: linear-gradient(#222 0%, #000 100%); }

.modal label[for="login"] span { position: relative; display: inline-block; padding-right: 30px; }

.modal label[for="login"] span::after { content: "×"; font-size: 1.4rem; position: absolute; top: 5px; right: 0; border: 1px solid rgba(255, 255, 255, 0.5); width: 20px; height: 20px; line-height: 20px; }

.modal .login-form { border-bottom: 5px dotted #59563b; padding: 20px 10px 10px; }

.modal .login-form form { position: relative; margin-bottom: 20px; }

.modal .login-form form input[type="text"], .modal .login-form form input[type="password"] { display: block; margin: 5px 0 0 0; padding: 5px; background: #fff; border: 2px solid #59563b; width: 70%; }

.modal .login-form form button { position: absolute; right: 10px; top: 0; width: 25%; height: 100%; background: #45abbf url(../../images/commit/key.png) center 20px no-repeat; background-size: 35px; color: #fff; padding-top: 45px; font-size: 12px; }

.modal .line-button { margin: 10px auto; }

.modal .form1 { padding: 20px 10px; }

.modal .contact { display: block; width: 200px; margin: 20px auto 10px; font-size: 1.2rem; background: -webkit-gradient(linear, left top, left bottom, from(#bf2868), to(#ee004e)); background: -webkit-linear-gradient(#bf2868, #ee004e); background: -o-linear-gradient(#bf2868, #ee004e); background: linear-gradient(#bf2868, #ee004e); color: #fff; border-radius: 30px; padding: 10px 0; text-align: center; }

.modal .contact img { width: 25px; }

#login[type=checkbox]:checked + .modal { top: 0; }

/*------------------------------------------*/
/*main--------------------------------------*/
@-webkit-keyframes visual { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes visual { 0% { opacity: 0; }
  100% { opacity: 1; } }

@-webkit-keyframes scale-up { 0% { -webkit-transform: scale(0.2); transform: scale(0.2); }
  50% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(1); transform: scale(1); } }

@keyframes scale-up { 0% { -webkit-transform: scale(0.2); transform: scale(0.2); }
  50% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(1); transform: scale(1); } }

@-webkit-keyframes scale-down { 0% { -webkit-transform: scale(2); transform: scale(2); }
  100% { -webkit-transform: scale(0.9); transform: scale(0.9); } }

@keyframes scale-down { 0% { -webkit-transform: scale(2); transform: scale(2); }
  100% { -webkit-transform: scale(0.9); transform: scale(0.9); } }

@-webkit-keyframes height { 0% { max-height: 0;
    opacity: 0; }
  100% { max-height: 100%;
    opacity: 1; } }

@keyframes height { 0% { max-height: 0;
    opacity: 0; }
  100% { max-height: 100%;
    opacity: 1; } }

@-webkit-keyframes left-in { 0% { left: -100vw;
    opacity: 0; }
  100% { left: 0;
    opacity: 1; } }

@keyframes left-in { 0% { left: -100vw;
    opacity: 0; }
  100% { left: 0;
    opacity: 1; } }

@-webkit-keyframes right-in { 0% { right: -100vw;
    opacity: 0; }
  100% { right: 0;
    opacity: 1; } }

@keyframes right-in { 0% { right: -100vw;
    opacity: 0; }
  100% { right: 0;
    opacity: 1; } }

main #fv-area { position: relative; width: 100%; height: 920px; padding: 0; }

main #fv-area #video { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 1; height: 100%; }

main #fv-area #fv_content { position: relative; z-index: 100; max-width: 1000px; margin: 0 auto; }

main #fv-area #fv_content .bg-chara, main #fv-area #fv_content .fv-text1, main #fv-area #fv_content .fv-text2, main #fv-area #fv_content .fv-boat { display: inline-block; position: absolute; }

@-webkit-keyframes bg-chara-in { 0% { right: -100vw; }
  100% { right: -50px; } }

@keyframes bg-chara-in { 0% { right: -100vw; }
  100% { right: -50px; } }

main #fv-area #fv_content .bg-chara { top: 180px; right: -100vw; width: 300px; z-index: 10; -webkit-animation: bg-chara-in .5s ease .5s 1 normal forwards; animation: bg-chara-in .5s ease .5s 1 normal forwards; }

main #fv-area #fv_content .fv-text1 { width: 180px; top: 190px; left: 5px; z-index: 20; opacity: 0; -webkit-animation: visual .5s ease .5s 1 normal forwards; animation: visual .5s ease .5s 1 normal forwards; }

main #fv-area #fv_content .fv-text2 { width: 320px; height: 136px; top: 300px; left: 10px; z-index: 30; }

main #fv-area #fv_content .fv-text2 img { max-height: 0; opacity: 0; -webkit-animation: height .5s ease .7s 1 normal forwards; animation: height .5s ease .7s 1 normal forwards; }

@-webkit-keyframes fv-boat-in { 0% { right: 100vw; }
  100% { right: 0; } }

@keyframes fv-boat-in { 0% { right: 100vw; }
  100% { right: 0; } }

main #fv-area #fv_content .fv-boat { z-index: 1; top: -10px; right: 100vw; width: 600px; max-width: 600px; -webkit-animation: fv-boat-in .5s ease 0s 1 normal forwards; animation: fv-boat-in .5s ease 0s 1 normal forwards; }

main #fv-area #fv_content .fv-block1 { width: 100%; height: 370px; max-width: 1000px; position: absolute; top: 430px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 100; text-align: right; opacity: 0; -webkit-animation: visual 1s ease 1.5s 1 normal forwards; animation: visual 1s ease 1.5s 1 normal forwards; }

main #fv-area #fv_content .fv-block1::before { content: ""; width: 200vw; height: 100px; background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0)), to(black)); background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), black); background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), black); background: linear-gradient(0deg, rgba(0, 0, 0, 0), black); -webkit-transform: rotate(-4deg); -ms-transform: rotate(-4deg); transform: rotate(-4deg); position: absolute; top: 10px; left: -50%; z-index: -1; }

main #fv-area #fv_content .fv-block1 h3 { position: relative; z-index: 20; padding-top: 10px; }

main #fv-area #fv_content .fv-block1 h3 img { width: 280px; }

main #fv-area #fv_content .fv-block1 .fv-block1-mobs { position: relative; text-align: left; margin-top: -20px; }

main #fv-area #fv_content .fv-block1 .fv-block1-mobs .fv-block1-text2 { position: absolute; top: 30px; right: 0; z-index: 30; width: 220px; }

main #fv-area #fv_content .fv-block1 .fv-block1-mobs .fv-block1-img { width: 280px; position: relative; left: -20px; z-index: 10; }

main #fv-area #fv_content .fv-block1 .fv-block1-mobs [class^=mobs-tag] { position: absolute; z-index: 100; }

main #fv-area #fv_content .fv-block1 .fv-block1-mobs .mobs-tag1 { bottom: 60px; left: 10px; width: 200px; height: 60px; }

main #fv-area #fv_content .fv-block1 .fv-block1-mobs .mobs-tag1 img { display: block; width: 120px; -webkit-animation: scale-up 3s ease .1s infinite normal forwards; animation: scale-up 3s ease .1s infinite normal forwards; -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; }

main #fv-area #fv_content .fv-block1 .fv-block1-mobs .mobs-tag2 { bottom: 0; left: 20px; width: 200px; height: 60px; }

main #fv-area #fv_content .fv-block1 .fv-block1-mobs .mobs-tag2 img { display: block; width: 110px; -webkit-animation: scale-up 2s ease 1s infinite normal forwards; animation: scale-up 2s ease 1s infinite normal forwards; -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; }

main #fv-area #fv_content .fv-block1 .fv-block1-mobs .mobs-tag3 { bottom: 70px; left: 210px; width: 200px; height: 60px; }

main #fv-area #fv_content .fv-block1 .fv-block1-mobs .mobs-tag3 img { display: block; width: 140px; -webkit-animation: scale-up 1s ease 2s infinite normal forwards; animation: scale-up 1s ease 2s infinite normal forwards; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; }

@-webkit-keyframes item { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  5% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
  10% { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
  15% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
  20% { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
  25% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } }

@keyframes item { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  5% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
  10% { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
  15% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
  20% { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
  25% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } }

main #fv-area #fv_content .fv-block1 .fv-block1-mobs [class^=mobs-item] { position: absolute; z-index: 100; overflow: hidden; border-radius: 50%; border: 3px solid #000; background: #fff; }

main #fv-area #fv_content .fv-block1 .fv-block1-mobs [class^=mobs-item] img { display: block; }

main #fv-area #fv_content .fv-block1 .fv-block1-mobs .mobs-item1 { top: 125px; left: 40px; width: 80px; height: 80px; }

main #fv-area #fv_content .fv-block1 .fv-block1-mobs .mobs-item2 { top: 125px; right: 50px; width: 70px; height: 70px; }

main #fv-area #fv_content .fv-block1 .fv-block1-mobs .mobs-item3 { bottom: -5px; right: 30px; width: 90px; height: 90px; }

main #fv-area #fv_content .fv-block1 .fv-block1-mobs [class^=mobs-tag], main #fv-area #fv_content .fv-block1 .fv-block1-mobs [class^=mobs-item] { opacity: 0; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; }

main #fv-area #fv_content .fv-block1 .modsin [class^=mobs-tag], main #fv-area #fv_content .fv-block1 .modsin [class^=mobs-item] { opacity: 1; }

main #fv-area #fv_content .fv-block1 .modsin [class^=mobs-item] { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-animation: scale-down 1s ease 0s 1 normal forwards; animation: scale-down 1s ease 0s 1 normal forwards; }

main #fv-area #fv_content .fv-block1 .modsin [class^=mobs-item] img { -webkit-animation: item 3s ease 2s infinite normal; animation: item 3s ease 2s infinite normal; }

main #fv-area #fv_content .fv-block1 .mobs-text1 { text-align: center; padding-top: 10px; }

main #fv-area #fv_content .fv-block1 .mobs-text1 img { display: block; margin: auto; -webkit-transform: scale(94%); -ms-transform: scale(94%); transform: scale(94%); -webkit-transition: 1s; -o-transition: 1s; transition: 1s; -webkit-animation: item 3s ease 2s infinite normal; animation: item 3s ease 2s infinite normal; width: 96%; max-width: 625px; }

main [class^="section"] { text-align: center; }

main [class^="section"] .center { width: 96%; margin: auto; }

main .content1 .section1 { background: #000; padding: 20px 0; text-align: center; }

main .content1 .section1 img { width: 96%; }

main .content1 .section2 { background: #f4f2e5; padding: 30px 20px; }

main .content1 .section2 div { max-width: 800px; margin: auto; text-align: left; padding: 30px 20px; background-image: url("../../images/commit/parts3.png"), url("../../images/commit/parts3.png"); background-position: center top,center bottom; background-repeat: no-repeat,no-repeat; background-size: auto 7px, auto 7px; position: relative; }

main .content1 .section2 div p { margin-bottom: 10px; }

main .content1 .section2 div .sp-block { margin-left: 15px; }

main .content1 .section2 div:before, main .content1 .section2 div:after { content: ""; width: 100%; height: 99%; display: block; position: absolute; top: 1%; }

main .content1 .section2 div:before { border-left: 4px dotted #aa8034; left: -6px; }

main .content1 .section2 div:after { border-right: 4px dotted #aa8034; right: -6px; }

main .content1 .section3 { background: #fff; padding: 20px 0; }

main .content1 .section3 div[class^="circle"] { position: relative; margin: 30px auto; color: #7d400b; }

main .content1 .section3 div[class^="circle"] img { display: block; width: 60%; max-width: 300px; position: relative; z-index: 100; }

main .content1 .section3 div[class^="circle"] p { margin-top: -70px; font-size: 120%; padding: 60px 20px; position: relative; z-index: 10; width: 85%; background: #fff; }

main .content1 .section3 div[class^="circle"] p::before { content: ""; display: block; width: 100%; height: 100%; border: 2px solid #ebe1b5; position: absolute; left: 5px; top: 5px; z-index: -1; background: rgba(255, 255, 255, 0.5); }

main .content1 .section3 div[class^="circle"] p::after { content: ""; display: block; width: 100%; height: 100%; border: 2px solid #ebe1b5; position: absolute; left: -5px; top: -5px; z-index: -1; background: rgba(255, 255, 255, 0.5); }

main .content1 .section3 div[class^="circle"] p b { display: block; font-size: 180%; font-style: italic; color: #fff; text-shadow: 0 0 10px #ee004e, 0 0 20px #ffc9ef, 1px 1px 5px #c50404, -1px -1px 5px #c50404; }

main .content1 .section3 .circle1 { background: #fff; text-align: right; }

main .content1 .section3 .circle1::after { content: ""; display: block; width: 250%; height: 80%; -webkit-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); background: #f7f7ec; position: absolute; left: -100%; top: 10%; }

main .content1 .section3 .circle1 img { margin-left: 0; margin-right: auto; }

main .content1 .section3 .circle1 p { margin-left: auto; margin-right: 10px; }

main .content1 .section3 .circle2 { text-align: left; }

main .content1 .section3 .circle2::after { content: ""; display: block; width: 250%; height: 80%; -webkit-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); background: #ecf6f7; position: absolute; right: -100%; top: 10%; }

main .content1 .section3 .circle2 img { margin-left: auto; margin-right: 0; }

main .content1 .section3 .circle2 p { margin-left: 10px; margin-right: auto; }

main .content1 .section3 .circle3 { background: #fff; text-align: right; }

main .content1 .section3 .circle3::after { content: ""; display: block; width: 250%; height: 80%; -webkit-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); background: #f2e6f3; position: absolute; left: -100%; top: 10%; }

main .content1 .section3 .circle3 img { margin-left: 0; margin-right: auto; }

main .content1 .section3 .circle3 p { margin-left: auto; margin-right: 10px; }

main .content1 .section4 { background: -webkit-gradient(linear, left bottom, left top, from(#76020d), color-stop(40%, #b1254d), color-stop(60%, #b4446c), color-stop(70%, #b1254d), to(#76020d)); background: -webkit-linear-gradient(bottom, #76020d 0%, #b1254d 40%, #b4446c 60%, #b1254d 70%, #76020d 100%); background: -o-linear-gradient(bottom, #76020d 0%, #b1254d 40%, #b4446c 60%, #b1254d 70%, #76020d 100%); background: linear-gradient(to top, #76020d 0%, #b1254d 40%, #b4446c 60%, #b1254d 70%, #76020d 100%); padding-bottom: 50px; }

main .content1 .section4 h3 { padding-top: 50px; max-width: 800px; margin: auto; }

main .content1 .section4 .content1-user { padding: 10px; position: relative; }

main .content1 .section4 .content1-user .user-modal { width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; z-index: 100000; }

main .content1 .section4 .content1-user .user-modal button { display: none; }

main .content1 .section4 .content1-user .user-modal .modal-comment { padding: 10px; }

main .content1 .section4 .content1-user .user-modal .modal-comment img { display: block; margin: 0 auto 10px; width: 100%; max-height: 45vh; }

main .content1 .section4 .content1-user .user-modal .modal-comment p { background: rgba(255, 255, 255, 0.8); padding: 10px; overflow-y: scroll; height: 50vh; text-align: left; }

main .content1 .section4 .content1-user .user-modal .more-close { display: block; color: #000; width: 100%; line-height: 40px; background: #f2de27; border-top: 1px solid #000; position: fixed; left: 0; bottom: 0; }

main .content1 .section4 .content1-user .user-modal .more-close img { height: 20px; vertical-align: middle; }

main .content1 .section4 .content1-user .slider { margin: 30px auto; max-width: 700px; background: #fff; }

main .content1 .section4 .content1-user .slider .user-list { background: #fff; padding: 20px 30px; }

main .content1 .section4 .content1-user .slider .user-list h4 { font-size: 80%; text-align: left; }

main .content1 .section4 .content1-user .slider .user-list .photo { position: relative; }

main .content1 .section4 .content1-user .slider .user-list .photo .label { position: absolute; top: 0; left: -5px; width: 130px; height: 130px; background: url(../../images/commit/no-plate.png) center center no-repeat; background-size: contain; padding-top: 15px; }

main .content1 .section4 .content1-user .slider .user-list .photo .label span { display: block; color: #e0bf46; font-size: 115%; line-height: 27px; margin-left: -3px; }

main .content1 .section4 .content1-user .slider .user-list .photo .label b { width: 100%; line-height: 38px; text-align: center; margin-left: -3px; display: inline-block; }

main .content1 .section4 .content1-user .slider .user-list .photo .label b img { height: 30px; display: inline; }

main .content1 .section4 .content1-user .slider .user-list .photo .user_sns { border: 2px solid #999; max-height: 300px; }

main .content1 .section4 .content1-user .slider .user-list table { margin: 10px auto 0; border-top: 5px solid #e5d1c6; width: 100%; }

main .content1 .section4 .content1-user .slider .user-list table th, main .content1 .section4 .content1-user .slider .user-list table td { padding: 3px 0; text-align: center; vertical-align: middle; }

main .content1 .section4 .content1-user .slider .user-list table th { font-size: .8rem; text-align: right; color: #666; }

main .content1 .section4 .content1-user .slider .user-list table th p { display: inline-block; color: #000; font-size: 110%; font-weight: bold; padding-left: 10px; }

main .content1 .section4 .content1-user .slider .user-list table .price { color: #bf2868; font-size: 1.5rem; min-width: 130px; font-weight: bold; }

main .content1 .section4 .content1-user .slider .user-list table .price::after { content: " 円"; font-size: .8rem; color: #222; }

main .content1 .section4 .content1-user .slider .user-list .remaining { margin: 0 auto; background: #ebe1b5; text-align: center; font-size: 1.8rem; font-weight: bold; }

main .content1 .section4 .content1-user .slider .user-list .remaining::before, main .content1 .section4 .content1-user .slider .user-list .remaining::after { font-size: .9rem; font-weight: normal; }

main .content1 .section4 .content1-user .slider .user-list .remaining::before { content: "それでも残り　"; }

main .content1 .section4 .content1-user .slider .user-list .remaining::after { content: "　万円！"; }

main .content1 .section4 .content1-user .slider .user-list div[class^="user-comment"] { margin: 15px auto 0; text-align: left; border-top: 2px dotted #ccc; padding: 10px 0; overflow: hidden; max-height: 120px; position: relative; }

main .content1 .section4 .content1-user .slider .user-list div[class^="user-comment"] button { position: absolute; bottom: 0; left: 0; width: 100%; line-height: 40px; z-index: 10; background: #f2de27; border: 1px solid #000; border-right: 3px solid #000; border-bottom: 3px solid #000; }

main .content1 .section4 .content1-user .slider .user-list div[class^="user-comment"] button::before { content: ""; position: absolute; bottom: 40px; left: 0; z-index: -1; width: 100%; height: 50px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff)); background: -webkit-linear-gradient(rgba(255, 255, 255, 0), #fff); background: -o-linear-gradient(rgba(255, 255, 255, 0), #fff); background: linear-gradient(rgba(255, 255, 255, 0), #fff); }

main .content1 .section4 .content1-user .slider .user-list div[class^="user-comment"] button img { height: 20px; vertical-align: middle; }

main .content1 .section4 .content1-user .slider .user-list div[class^="user-comment"] p::before { content: "コメント"; background: #ccc; color: #fff; font-size: 80%; padding: 5px; }

main .content1 .section4 .content1-s4-text1 { padding: 20px; border: 2px dotted #cfab95; width: 96%; margin: 10px auto; }

main .content1 .section4 .content1-s4-text1 p { margin: 20px auto; }

main .content2 .section1 h2 { color: #222; font-size: 150%; padding: 0 20px; border: 4px solid #a97f34; -webkit-border-image: -webkit-gradient(linear, left bottom, left top, from(#ad7914), color-stop(40%, #fffa7b), color-stop(48%, #fff4de), color-stop(52%, #fff4de), color-stop(60%, #fffa7b), to(#ad7914)); -webkit-border-image: -webkit-linear-gradient(bottom, #ad7914 0%, #fffa7b 40%, #fff4de 48%, #fff4de 52%, #fffa7b 60%, #ad7914 100%); -o-border-image: -o-linear-gradient(bottom, #ad7914 0%, #fffa7b 40%, #fff4de 48%, #fff4de 52%, #fffa7b 60%, #ad7914 100%); border-image: -webkit-gradient(linear, left bottom, left top, from(#ad7914), color-stop(40%, #fffa7b), color-stop(48%, #fff4de), color-stop(52%, #fff4de), color-stop(60%, #fffa7b), to(#ad7914)); border-image: linear-gradient(to top, #ad7914 0%, #fffa7b 40%, #fff4de 48%, #fff4de 52%, #fffa7b 60%, #ad7914 100%); border-image-slice: 1; background: #f4f2e5; padding: 30px 0; }

main .content2 .section1 h2 img { display: block; margin: 0 auto -10px; width: 600px; }

main .content2 .section1 .board { text-shadow: 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff, 2px 0px 1px #fff, 0px 2px 1px #fff, -2px 0px 1px #fff, 0px -2px 1px #fff !important; background: url(../../images/commit/content2-bg1.jpg) no-repeat; background-size: cover; padding: 30px 5px; }

main .content2 .section1 .list-text { border: 4px solid #a97f34; -webkit-border-image: -webkit-gradient(linear, left bottom, left top, from(#5b6163), color-stop(40%, #d4e1e2), color-stop(48%, #ffffff), color-stop(52%, #ffffff), color-stop(60%, #d4e1e2), to(#5b6163)); -webkit-border-image: -webkit-linear-gradient(bottom, #5b6163 0%, #d4e1e2 40%, #ffffff 48%, #ffffff 52%, #d4e1e2 60%, #5b6163 100%); -o-border-image: -o-linear-gradient(bottom, #5b6163 0%, #d4e1e2 40%, #ffffff 48%, #ffffff 52%, #d4e1e2 60%, #5b6163 100%); border-image: -webkit-gradient(linear, left bottom, left top, from(#5b6163), color-stop(40%, #d4e1e2), color-stop(48%, #ffffff), color-stop(52%, #ffffff), color-stop(60%, #d4e1e2), to(#5b6163)); border-image: linear-gradient(to top, #5b6163 0%, #d4e1e2 40%, #ffffff 48%, #ffffff 52%, #d4e1e2 60%, #5b6163 100%); border-image-slice: 1; background: #fff; padding: 30px 20px; text-align: left; }

main .content2 .section1 .list-text p { border-bottom: 2px dashed #ccc; margin-bottom: 10px; }

main .content2 .section2 { background: url(../../images/commit/content2-bg2.jpg) left top repeat; padding: 30px 0; position: relative; }

main .content2 .section2::before { content: ""; display: block; position: absolute; bottom: 5%; right: -10%; width: 0; height: 0; border-style: solid; border-right: 50% solid transparent; border-left: 50% solid transparent; border-bottom: 50% solid #555555; border-top: 0; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); }

main .content2 .section2 .section4-text1 { margin: 20px auto; padding: 10px; font-size: 130%; font-weight: bold; color: #7d400b; text-shadow: 1px 1px 0 #fff; }

main .content2 .section3 { background: #fff; padding: 20px 10px; }

main .content2 .section3 h2 { padding: 10px 0; text-align: center; }

main .content2 .section3 h2 img { max-width: 600px; width: 100%; }

main .content2 .section3 .plan-block { text-align: left; }

main .content2 .section3 .plan-block li { margin-bottom: 30px; }

main .content2 .section3 .plan-block h3 { margin: 15px auto; background-image: url(../../images/commit/bg1-l.png), url(../../images/commit/bg1-r.png), -webkit-gradient(linear, left top, right top, from(#fff), color-stop(0.5%, #fff), color-stop(0.5%, #bf2868), color-stop(99%, #bf2868), to(#fff)); background-image: url(../../images/commit/bg1-l.png), url(../../images/commit/bg1-r.png), -webkit-linear-gradient(left, #fff 0%, #fff 0.5%, #bf2868 0.5%, #bf2868 99%, #fff); background-image: url(../../images/commit/bg1-l.png), url(../../images/commit/bg1-r.png), -o-linear-gradient(left, #fff 0%, #fff 0.5%, #bf2868 0.5%, #bf2868 99%, #fff); background-image: url(../../images/commit/bg1-l.png), url(../../images/commit/bg1-r.png), linear-gradient(90deg, #fff 0%, #fff 0.5%, #bf2868 0.5%, #bf2868 99%, #fff); background-position: left center, right center, left center; background-repeat: no-repeat; background-size: auto 100%,auto 100%, 100%; font-size: 130%; font-weight: bold; color: #fff; position: relative; padding: 3px 100px 5px 30px; line-height: 40px; }

main .content2 .section3 .plan-block h3::before, main .content2 .section3 .plan-block h3::after { content: ""; display: block; width: 100%; height: 3px; position: absolute; left: 0; background: #fff -webkit-gradient(linear, left top, right top, from(#985600), color-stop(#b2810e), color-stop(#d5b94a), color-stop(#f6e96a), color-stop(#fff3d5), color-stop(#f6e96a), color-stop(#d5b94a), color-stop(#b2810e), to(#985600)); background: #fff -webkit-linear-gradient(left, #985600, #b2810e, #d5b94a, #f6e96a, #fff3d5, #f6e96a, #d5b94a, #b2810e, #985600); background: #fff -o-linear-gradient(left, #985600, #b2810e, #d5b94a, #f6e96a, #fff3d5, #f6e96a, #d5b94a, #b2810e, #985600); background: #fff linear-gradient(90deg, #985600, #b2810e, #d5b94a, #f6e96a, #fff3d5, #f6e96a, #d5b94a, #b2810e, #985600); }

main .content2 .section3 .plan-block h3::before { top: -6px; }

main .content2 .section3 .plan-block h3::after { bottom: -6px; }

main .content2 .section3 .plan-block h3 span { font-size: .8rem; font-weight: normal; position: absolute; top: 50%; right: 30px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #f4f2e5; }

main .content2 .section3 .plan-block dl { background: #59563b; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

main .content2 .section3 .plan-block dl dt { -webkit-box-flex: 0; -ms-flex: 0 0 30%; flex: 0 0 30%; padding: 10px 5px 10px 10px; color: #fff; text-align: center; }

main .content2 .section3 .plan-block dl dt span { display: inline-block; color: #dfe5d8; font-size: 80%; padding: 0 5px; background: #261607; letter-spacing: 2px; margin: 0 auto; }

main .content2 .section3 .plan-block dl dt p img { display: block; margin: 0 auto; width: 40px; }

main .content2 .section3 .plan-block dl dd { -webkit-box-flex: 70%; -ms-flex: 70%; flex: 70%; padding: 5px; }

main .content2 .section3 .plan-block .price { background: url(../../images/commit/content2-s3-price.png) center center no-repeat; background-size: contain; padding: 30px; text-align: center; margin: 10px auto; position: relative; }

main .content2 .section3 .plan-block .price::before { content: "的中金額"; font-size: 90%; display: block; }

main .content2 .section3 .plan-block .price .txt-edge { position: relative; }

main .content2 .section3 .plan-block .price .txt-edge span, main .content2 .section3 .plan-block .price .txt-edge b { text-align: center; display: block; width: 100%; top: 0; left: 0; font-size: 200%; }

main .content2 .section3 .plan-block .price .txt-edge span { position: relative; z-index: 2; color: #bf2868; font-weight: bold; text-shadow: 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff, 2px 0px 1px #fff, 0px 2px 1px #fff, -2px 0px 1px #fff, 0px -2px 1px #fff !important; }

main .content2 .section3 .plan-block .price .txt-edge .edge1 { position: absolute; z-index: 1; color: #fff; text-shadow: 4px 4px 1px #bf2868, 0px 4px 1px #bf2868, 4px 0px 1px #bf2868, 0px 0px 1px #bf2868, 4px 2px 1px #bf2868, 2px 4px 1px #bf2868, 0px 2px 1px #bf2868, 2px 0px 1px #bf2868, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000; }

main .content2 .section3 .plan-block .plan-comment { border: 2px dotted #be9532; border-radius: 10px; max-height: 65px; overflow: hidden; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; }

main .content2 .section3 .plan-block .plan-comment h4.open-close { background: #bf6e28; color: #fff; text-align: center; margin-bottom: 20px; border-radius: 10px; height: 65px; position: relative; }

main .content2 .section3 .plan-block .plan-comment h4.open-close img { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: inline-block; height: 50px; }

main .content2 .section3 .plan-block .plan-comment h4.open-close .plus { -webkit-transition: .5s; -o-transition: .5s; transition: .5s; opacity: 1; -webkit-transform: translate(-50%, -50%) rotateX(360deg); transform: translate(-50%, -50%) rotateX(360deg); }

main .content2 .section3 .plan-block .plan-comment h4.open-close .minus { -webkit-transition: .5s; -o-transition: .5s; transition: .5s; opacity: 0; -webkit-transform: translate(-50%, -50%) rotateX(90deg); transform: translate(-50%, -50%) rotateX(90deg); }

main .content2 .section3 .plan-block .plan-comment .owner { background: url(../../images/commit/icon4.png) 10px 15px no-repeat; background-size: 50px auto; padding: 10px 10px 10px 70px; font-size: 110%; min-height: 80px; }

main .content2 .section3 .plan-block .plan-comment .owner span { font-size: 85%; padding-top: 5px; display: block; color: #be9532; }

main .content2 .section3 .plan-block .plan-comment ul { border-top: 5px solid #f4f2e5; padding-left: 20px; }

main .content2 .section3 .plan-block .plan-comment ul li { background: url(../../images/commit/icon5.png) left 10px no-repeat; background-size: 25px auto; padding: 10px 10px 10px 40px; }

main .content2 .section3 .plan-block .plan-comment ul li p { font-size: 85%; padding-top: 5px; color: #be9532; }

main .content2 .section3 .plan-block .comment-open { max-height: 5000px; }

main .content2 .section3 .plan-block .comment-open h4.open-close .plus { opacity: 0; -webkit-transform: translate(-50%, -50%) rotateX(90deg); transform: translate(-50%, -50%) rotateX(90deg); }

main .content2 .section3 .plan-block .comment-open h4.open-close .minus { opacity: 1; -webkit-transform: translate(-50%, -50%) rotateX(360deg); transform: translate(-50%, -50%) rotateX(360deg); }

main .content3 .section1 h2 { background: -webkit-linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%); background: -o-linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%); background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%); position: relative; text-align: center; text-shadow: 1px 1px 0 #fff; }

main .content3 .section1 h2::before, main .content3 .section1 h2::after { content: ""; display: block; height: 5px; }

main .content3 .section1 h2::before { border-bottom: 3px dotted #000; }

main .content3 .section1 h2::after { border-top: 3px dotted #000; }

main .content3 .section1 h2 span { display: block; padding: 10px 0; }

main .content3 .section1 div { background: #000; padding: 30px 10px; color: #fff; }

main .content3 .section1 div h3 { background-image: url(../../images/commit/parts4.png), url(../../images/commit/parts4.png); background-repeat: no-repeat,no-repeat; background-position: center top,center bottom; background-size: 100% auto,100% auto; margin: 50px auto; max-width: 800px; padding: 80px 0; font-size: 160%; }

main .content4 { background: #fff; }

main .content4 section { text-align: center; }

main .content4 section h2 img { width: 96%; }

main .content4 section h3 { padding: 80px 10px 10px; margin-top: -60px; }

main .content4 section h4 { background: url(../../images/commit/parts5.png) center center no-repeat; background-size: 98% auto; padding: 30px 10px; min-height: 142px; font-size: 160%; font-weight: bold; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

main .content4 section dl.summary { position: relative; z-index: 10; padding: 30px 15px; margin: 10px auto; width: 98%; overflow: hidden; }

main .content4 section dl.summary::before { content: "point1"; display: inline-block; position: absolute; padding: 7px 0; left: -50px; top: 22px; width: 170px; text-align: center; font-size: 18px; line-height: 16px; background: #be9532; color: #fff; letter-spacing: 0.05em; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }

main .content4 section dl.summary::after { content: ""; display: block; width: 98%; height: 98%; position: absolute; z-index: -1; left: 1%; top: 1%; background: #e0e0e0; }

main .content4 section dl.summary dt { text-align: center; font-size: 160%; padding: 20px 0; margin-bottom: 20px; }

main .content4 section dl.summary dt::after { content: ""; display: block; width: 100px; height: 8px; background: #000; margin: 40px auto 20px; }

main .content4 section dl.summary dd { background: url(../../images/commit/icon6.png) 10px top no-repeat; background-size: 30px; text-align: left; font-size: 115%; padding: 0 10px 0 50px; margin-bottom: 20px; }

main .content4 section p { text-align: left; padding: 20px 10px; color: #222; }

main .content4 .section1 h2 { margin: 0 10px; padding: 50px 0 20px; }

main .content4 .section1 h2 img { max-width: 500px; }

main .content4 .section1 ul { text-align: center; margin: 20px auto; width: 96%; max-width: 800px; }

main .content4 .section1 ul li { margin-bottom: 15px; }

main .content4 .section3 dl.summary::before { content: "point2"; }

main .content4 .section3 .center-block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: top; -ms-flex-align: top; align-items: top; }

main .content4 .section3 .center-block dl { width: 48%; padding: 20px 0; }

main .content4 .section3 .center-block dl dt { font-weight: bold; height: 250px; }

main .content4 .section3 .center-block dl dt img { display: block; margin: 10px auto; }

main .content4 .section3 .center-block dl dd { margin-top: 30px; padding: 60px 10px 20px; background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#222)); background: -webkit-linear-gradient(top, #666 0%, #222 100%); background: -o-linear-gradient(top, #666 0%, #222 100%); background: linear-gradient(180deg, #666 0%, #222 100%); color: #fff; position: relative; }

main .content4 .section3 .center-block dl dd::before { content: ""; background: url(../../images/commit/parts7.png) top center no-repeat; background-size: 100% auto; width: 100%; height: 100px; position: absolute; left: 0; top: 0; }

main .content4 .section3 .center-block dl dd b { display: block; color: #e0bf46; }

main .content4 .section3 .center-block dl dd b img { width: 50px; display: block; margin: 20px auto 0; }

main .content4 .section3 .center-block dl dd p { margin-top: 30px; border-top: 3px dotted #ccc; color: #ccc; text-align: left; }

main .content4 .section4 dl.summary::before { content: "point3"; }

main .content4 .section4 h5 { font-size: 120%; font-weight: bold; padding: 20px 0; color: #fff; text-shadow: 0 0 4px #bf2868, 0 0 4px #bf2868, 0 0 4px #bf2868, 0 0 8px #bf2868, 0 0 8px #bf2868, 0 0 8px #bf2868; }

main .content5 .section1 { padding: 30px 10px; background: #261607; }

main .content5 .section1 .form1 { background: none; }

main .content5 .section2 { background: #fff; padding: 30px 10px; }

main .content5 .section2 h2 { margin: 20px auto; }

main .content5 .section2 ul { padding: 20px 0; margin: auto; }

main .content5 .section2 ul li { background: #fcfbf6 url(../../images/commit/logo-bg.png) center 60% no-repeat; background-size: 70% auto; border: 2px solid #a97f34; padding: 70px 20px 20px 20px; position: relative; -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); text-align: left; margin-bottom: 20px; }

main .content5 .section2 ul li h3 { position: absolute; top: 5px; left: -8px; width: 90%; padding: 5px 0; height: 60px; background: -webkit-gradient(linear, left bottom, left top, from(#970438), color-stop(40%, #b1254d), color-stop(60%, #b4446c), color-stop(70%, #b1254d), to(#76020d)); background: -webkit-linear-gradient(bottom, #970438 0%, #b1254d 40%, #b4446c 60%, #b1254d 70%, #76020d 100%); background: -o-linear-gradient(bottom, #970438 0%, #b1254d 40%, #b4446c 60%, #b1254d 70%, #76020d 100%); background: linear-gradient(to top, #970438 0%, #b1254d 40%, #b4446c 60%, #b1254d 70%, #76020d 100%); }

main .content5 .section2 ul li h3::after { content: ""; position: absolute; right: -1px; top: 0; width: 0; height: 0; border-style: solid; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-right: 25px solid #fcfbf6; border-left: 0; }

main .content5 .section2 ul li h3 span { display: block; color: #fff; border-top: 2px dotted #fff; border-bottom: 2px dotted #fff; font-size: 140%; padding: 5px 20px; }

main .content5 .section2 ul li .date { font-size: 80%; color: #59563b; text-align: right; }

main .content5 .section2 ul li .tag { border: 1px solid #59563b; padding: 0 10px; display: inline-block; background: #f4f2e5; text-shadow: 1px 1px 0 #fff; }

main .content5 .section2 ul li .location img { width: 35px; vertical-align: sub; }

main .content5 .section2 ul li .refund { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

main .content5 .section2 ul li .refund .txt-edge { position: relative; }

main .content5 .section2 ul li .refund .txt-edge span, main .content5 .section2 ul li .refund .txt-edge b { text-align: center; display: block; width: 100%; height: 100%; top: 0; left: 0; font-size: 200%; }

main .content5 .section2 ul li .refund .txt-edge span { position: relative; z-index: 2; color: #be9532; font-weight: bold; text-shadow: 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff, 2px 0px 1px #fff, 0px 2px 1px #fff, -2px 0px 1px #fff, 0px -2px 1px #fff !important; }

main .content5 .section2 ul li .refund .txt-edge b { position: absolute; z-index: 1; color: #fff; text-shadow: 4px 4px 1px #e0bf46, 0px 4px 1px #e0bf46, 4px 0px 1px #e0bf46, 0px 0px 1px #e0bf46, 4px 2px 1px #e0bf46, 2px 4px 1px #e0bf46, 0px 2px 1px #e0bf46, 2px 0px 1px #e0bf46, 0 0 8px #e0bf46, 0 0 8px #e0bf46, 0 0 8px #e0bf46; }

main .contact-form { padding: 70px 0 50px; background: #fff; }

main .contact-form section { min-height: 80vh; max-width: 600px; margin: auto; }

main .contact-form section h2 { background: #669ec7; color: #fff; margin-bottom: 20px; font-size: 130%; padding: 5px 10px; border-top: 1px solid #fff; }

main .contact-form section .mail-form .post-column { padding: 10px; }

main .contact-form section .mail-form .post-column .user-id, main .contact-form section .mail-form .post-column .user-mail { margin-bottom: 5px; }

main .contact-form section .mail-form .post-column .user-id::before, main .contact-form section .mail-form .post-column .user-mail::before { content: "ID"; background: #669ec7; color: #fff; display: inline-block; text-align: center; padding: 2px 0; font-size: 80%; margin-right: 10px; width: 80px; }

main .contact-form section .mail-form .post-column .user-mail::before { content: "MAIL"; }

main .contact-form section .mail-form .post-column .title, main .contact-form section .mail-form .post-column .text { color: #59563b; text-align: left; margin-top: 10px; font-weight: bold; margin-top: 20px; }

main .contact-form section .mail-form .post-column .title + input, main .contact-form section .mail-form .post-column .text + textarea { display: block; width: 100%; border: 2px solid #669ec7; margin: 5px auto; padding: 5px; background: #fff; }

main .contact-form section .mail-form .post-column button { display: block; width: 200px; text-align: center; border-radius: 10px; background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #669ec7), color-stop(50%, #068ed8)); background: -webkit-linear-gradient(#669ec7 50%, #068ed8 50%); background: -o-linear-gradient(#669ec7 50%, #068ed8 50%); background: linear-gradient(#669ec7 50%, #068ed8 50%); color: #fff; padding: 10px; font-size: 130%; font-weight: bold; margin: 20px auto; border: 2px solid #068ed8; letter-spacing: 8px; }

main .contact-form section .mail-form .post-column button img { display: inline-block; width: 30px; }

/*------------------------------------------*/
/*footer------------------------------------*/
footer { width: 100%; position: absolute; bottom: 0; left: 0; text-align: center; font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; background: #000; border-top: 2px solid #000; }

footer div { text-align: center; }

footer div a { color: #fff; }

footer small { display: block; text-align: center; padding: 5px; color: #fff; font-size: 10px; }

/*スマホ--------------*/
@media screen and (max-width: 767px) { .sp-block { display: inline-block !important; }
  .sp-view { display: inline-block !important; }
  .pc-view { display: none !important; }
  .sp-wbr { display: inline-block !important; } }

/*スマホ・タブレット共有--------------*/
@media screen and (max-width: 1023px) { footer div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; }
  footer div a { -webkit-box-flex: 0; -ms-flex: 0 1 49%; flex: 0 1 49%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 2px; font-size: 85%; height: 50px; background: #222; margin-bottom: 2px; } }

/*タブレット--------------------------------*/
/*------------------------------------------*/
/*タブレット/PC----------------------------------------*/
@media screen and (min-width: 768px) { .sp-view { display: none !important; }
  .pc-view { display: inline-block !important; }
  .sp-wbr { display: inline !important; }
  html { font-size: 24px; }
  .modal label[for="login"] { display: block; color: #fff; border-top: 1px solid #000; border-bottom: 1px solid rgba(255, 255, 255, 0.2); text-align: center; line-height: 50px; background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#000)); background: -webkit-linear-gradient(#222 0%, #000 100%); background: -o-linear-gradient(#222 0%, #000 100%); background: linear-gradient(#222 0%, #000 100%); }
  .modal label[for="login"] span { position: relative; display: inline-block; padding-right: 40px; }
  .modal label[for="login"] span::after { content: "×"; display: block; font-size: 1.3rem; position: absolute; top: 9px; right: -7px; border: 1px solid rgba(255, 255, 255, 0.5); width: 32px; height: 32px; line-height: 30px; }
  main #fv-area { height: 1300px; }
  main #fv-area #fv_content .bg-chara { top: 100px; width: 450px; }
  main #fv-area #fv_content .fv-text1 { top: 220px; width: 250px; }
  main #fv-area #fv_content .fv-text2 { top: 320px; width: 400px; height: auto; }
  main #fv-area #fv_content .fv-boat { top: -100px; width: 1200px; max-width: 1200px; }
  main #fv-area #fv_content .fv-block1 { top: 480px; }
  main #fv-area #fv_content .fv-block1 h3 { position: relative; z-index: 20; padding-top: 10px; }
  main #fv-area #fv_content .fv-block1 h3 img { width: 600px; }
  main #fv-area #fv_content .fv-block1 .fv-block1-mobs .fv-block1-text2 { width: 450px; }
  main #fv-area #fv_content .fv-block1 .fv-block1-mobs .fv-block1-img { width: 400px; }
  main #fv-area #fv_content .fv-block1 .fv-block1-mobs .mobs-tag1 { width: 450px; height: auto; bottom: 50px; left: 30px; }
  main #fv-area #fv_content .fv-block1 .fv-block1-mobs .mobs-tag1 img { width: 170px; }
  main #fv-area #fv_content .fv-block1 .fv-block1-mobs .mobs-tag2 { width: 450px; height: auto; bottom: -50px; left: 20px; }
  main #fv-area #fv_content .fv-block1 .fv-block1-mobs .mobs-tag2 img { width: 160px; }
  main #fv-area #fv_content .fv-block1 .fv-block1-mobs .mobs-tag3 { width: 450px; height: auto; left: 380px; bottom: 0; }
  main #fv-area #fv_content .fv-block1 .fv-block1-mobs .mobs-tag3 img { width: 200px; }
  main #fv-area #fv_content .fv-block1 .fv-block1-mobs [class^=mobs-item] { position: absolute; z-index: 100; overflow: hidden; border-radius: 50%; border: 3px solid #000; background: #fff; }
  main #fv-area #fv_content .fv-block1 .fv-block1-mobs [class^=mobs-item] img { display: block; }
  main #fv-area #fv_content .fv-block1 .fv-block1-mobs .mobs-item1 { top: 180px; left: 60px; width: 130px; height: 130px; }
  main #fv-area #fv_content .fv-block1 .fv-block1-mobs .mobs-item2 { top: 230px; right: 200px; width: 150px; height: 150px; }
  main #fv-area #fv_content .fv-block1 .fv-block1-mobs .mobs-item3 { bottom: -20px; right: 0; width: 200px; height: 200px; }
  main #fv-area #fv_content .fv-block1 .fv-block1-mobs [class^=mobs-tag], main #fv-area #fv_content .fv-block1 .fv-block1-mobs [class^=mobs-item] { opacity: 0; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; }
  main #fv-area #fv_content .fv-block1 .modsin [class^=mobs-tag], main #fv-area #fv_content .fv-block1 .modsin [class^=mobs-item] { opacity: 1; }
  main #fv-area #fv_content .fv-block1 .modsin [class^=mobs-item] { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-animation: scale-down 1s ease 0s 1 normal forwards; animation: scale-down 1s ease 0s 1 normal forwards; }
  main #fv-area #fv_content .fv-block1 .modsin [class^=mobs-item] img { -webkit-animation: item 3s ease 2s infinite normal; animation: item 3s ease 2s infinite normal; }
  main #fv-area #fv_content .fv-block1 .mobs-text1 { text-align: center; padding-top: 10px; }
  main #fv-area #fv_content .fv-block1 .mobs-text1 img { display: block; -webkit-transform: scale(94%); -ms-transform: scale(94%); transform: scale(94%); -webkit-transition: 1s; -o-transition: 1s; transition: 1s; -webkit-animation: item 3s ease 2s infinite normal; animation: item 3s ease 2s infinite normal; }
  main .content1 .section1 { padding: 50px 0; }
  main .content1 .section1 img { max-width: 1000px; }
  main .content1 .section2 { padding: 50px 0; }
  main .content1 .section2 div { padding: 60px 40px; background-image: url("../../images/commit/parts3.png"), url("../../images/commit/parts3.png"); background-position: center top,center bottom; background-repeat: no-repeat,no-repeat; background-size: 100% auto, 100% auto; }
  main .content1 .section2 div:before { border-left: 6px dotted #aa8034; left: -10px; }
  main .content1 .section2 div:after { border-right: 6px dotted #aa8034; right: -10px; }
  main .content1 .section3 { padding: 50px 0; }
  main .content1 .section4 .content1-user { margin: 30px auto; max-width: 800px; }
  main .content1 .section4 .content1-user .user-modal .modal-comment { width: 700px; margin: auto; }
  main .content1 .section4 .content1-user .user-modal .modal-comment img { max-height: 40vh; }
  main .content1 .section4 .content1-user .user-modal .modal-comment p { height: 45vh; }
  main .content1 .section4 .content1-user .user-modal .more-close { width: 700px; margin: auto; border: 1px solid #000; border-right: 3px solid #000; border-bottom: 3px solid #000; position: relative; }
  main .content1 .section4 .content1-user .slick-arrow:before { font-size: 60px !important; }
  main .content1 .section4 .content1-user .slider .user-list { height: 850px; }
  main .content1 .section4 .content1-user .slider .user-list .photo .label { width: 190px; height: 190px; }
  main .content1 .section4 .content1-user .slider .user-list .photo .label span { line-height: 50px; }
  main .content1 .section4 .content1-user .slider .user-list .photo .label b { line-height: 50px; }
  main .content1 .section4 .content1-user .slider .user-list .photo .label b img { height: 40px; }
  main .content1 .section4 .content1-user .slider .user-list .photo .user_sns { border: 2px solid #999; max-height: 500px; }
  main .content1 .section4 .content1-user .slider .user-list div[class^="user-comment"] { max-height: 150px; }
  main .content1 .section4 .content1-s4-text1 { margin: 60px auto 30px; max-width: 800px; padding: 50px; }
  main .content2 .section1 { max-width: 1000px; margin: 50px auto; }
  main .content2 .section1 h2 { margin-bottom: 50px; }
  main .content2 .section2 h2, main .content2 .section2 div { max-width: 800px; margin: 50px auto; }
  main .content2 .section3 h2 { max-width: 800px; margin: 50px auto; }
  main .content2 .section3 .plan-block { max-width: 800px; margin: 50px auto; }
  main .content2 .section3 .plan-block li { margin-bottom: 30px; }
  main .content2 .section3 .plan-block li table th { width: 150px; }
  main .content2 .section3 .plan-block li table th::before { height: 30px; width: 5px; top: 10px; left: 0; }
  main .content2 .section3 .plan-block h3 { padding: 3px 100px 5px 50px; line-height: 50px; }
  main .content2 .section3 .plan-block h3 span { right: 50px; }
  main .content2 .section3 .plan-block .price { padding: 30px; margin: 20px auto; }
  main .content2 .section3 .plan-block .plan-comment { max-height: 80px; }
  main .content2 .section3 .plan-block .plan-comment h4.open-close { height: 80px; }
  main .content2 .section3 .plan-block .plan-comment h4.open-close img { height: 60px; }
  main .content2 .section3 .plan-block .comment-open { max-height: 5000px; }
  main .content3 .section1 div img { max-width: 800px; }
  main .content3 .section1 div h3 { background-image: url(../../images/commit/parts4.png), url(../../images/commit/parts4.png); background-repeat: no-repeat,no-repeat; background-position: center top,center bottom; background-size: 540px 38px,540px 38px; padding: 150px 0; }
  main .content4 section { max-width: 800px; margin: 0 auto; padding: 50px 0; }
  main .content4 section h4 { background: url(../../images/commit/parts5.png) center center no-repeat; background-size: 98% auto; padding: 30px 10px; min-height: 300px; font-size: 160%; font-weight: bold; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  main .content4 .section3 .center-block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: top; -ms-flex-align: top; align-items: top; }
  main .content4 .section3 .center-block dl { width: 48%; padding: 20px 0; }
  main .content4 .section3 .center-block dl dt { height: 430px; }
  main .content4 .section3 .center-block dl dd { padding: 100px 10px 50px; }
  main .content4 .section3 .center-block dl dd p { padding-top: 50px; }
  main .content5 .section1 h2, main .content5 .section1 div { max-width: 800px; margin: 0 auto; padding: 50px 0; }
  main .content5 .section3 { max-width: 800px; margin: 0 auto; padding: 50px 0; }
  main .contact-form { padding: 100px 0 50px; } }

/*------------------------------------------*/
/*PC----------------------------------------*/
@media screen and (min-width: 1024px) { .form1 { margin: 30px auto; }
  main #fv-area #fv_content .bg-chara { top: 130px; }
  main #fv-area #fv_content .fv-text1 { top: 270px; }
  main #fv-area #fv_content .fv-text2 { top: 380px; }
  main .content5 .section2 h2 { max-width: 800px; margin: 0 auto; padding: 50px 0; }
  main .content5 .section2 ul.center-block { padding: 50px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
  main .content5 .section2 ul.center-block li { -webkit-box-flex: 0; -ms-flex: 0 0 48%; flex: 0 0 48%; height: 100%; }
  main .content5 .section2 ul.center-block li h3 { padding: 5px 0; }
  main .content5 .section2 ul.center-block li h3::after { content: ""; position: absolute; right: -1px; top: 0; width: 0; height: 0; border-style: solid; border-top: 35px solid transparent; border-bottom: 35px solid transparent; border-right: 30px solid #fcfbf6; border-left: 0; }
  main .content5 .section2 ul.center-block li h3 span { font-size: 110%; padding: 5px 50px; }
  footer div { text-align: center; padding: 30px 0; }
  footer div a { font-size: 90%; display: inline-block; padding: 0 20px; border-left: 1px solid #eee; }
  footer div a:last-child { border-right: 1px solid #eee; }
  footer small { font-size: 80%; } }