@charset "utf-8";
/* CSS Document */

/***COMMON***/
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium"); }
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold; }
body{
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif;
}
.sp{display: none;}
.topmain{ width: 100%; max-width: 1024px; margin: 0 auto 50px;}
.topmain img{ width: 100%; height: auto; display: block;}
.hdtitle{ display: flex; width: 100%; max-width: 1024px; margin: 0 auto 15px;border-bottom: solid 7px #db272d;justify-content: space-between;align-items: flex-end;padding-top: 10px;}
.hdtitle .titleimg img{display: block;}
.hdtitle .nengou{ color: #3c1508;font-size: 21px; padding: 5px;line-height: 1.0;}
.hdtitle .nengou span{font-size: 40px;}
.gototop{ text-align: right; font-size: 16px; width: 1024px; max-width: 90%;margin: 0 auto 25px;}
.gototop img{ margin-right: 5px; }
.gototop a{ color: #000000;text-decoration: none;}
.gototop a:hover{ text-decoration: underline;}
.contents{ width: 1024px; max-width: 90%; margin: 0 auto 50px;}
#page_top{position: fixed;right: 30px;opacity: 0.8;z-index: 9998;}
#page_top img{display: block;}
#page_top:hover{opacity: 1.0; cursor: pointer;}
.copyright{ padding: 15px; color:#CCCCCC;font-size: 14px; border-top: solid 1px #CCCCCC;}
.kyotyo{ font-weight: bold; background-color: #FFFA75; color: #FF0000;}


/***PAGE COMMON***/
h1.h1mds{ font-size: 28px; text-align: center; padding: 10px; border-bottom: solid 1px #000000; font-weight: bold; margin-bottom: 30px;}
h2{ font-size: 18px;padding: 5px 10px;margin-bottom: 20px; font-weight: bold;border-radius: 5px;}
h3{ font-size: 24px; font-weight: bold; border-bottom: solid 1px #000000; display: flex;margin-bottom: 25px;line-height: 1.2;align-items: center;}
.txt_bold{ font-weight: bold;}

/***MENU***/
.clone-nav{ position: fixed;top:0;left:0;z-index: 2; transition: .3s; transform: translateY(-100%);}
.is-show{transform: translateY(0);}
nav{width: 100%; background-color: #FFFFFF;margin-bottom: 50px;}
.menu{ display: flex; justify-content: space-between; width: 1024px; max-width: 100%; margin: 0 auto 0;border-bottom: solid 1px #000000;}
.menu li{ width: 24.5%; border-top: solid 3px #db272d;font-weight: bold; text-align: center;}
.menu li p{line-height: 1.0;font-size: 24px; padding: 25px 0 5px;}
.menu li a{ color: #000000; display: block; text-decoration: none;}
.menu li img{ display: block; padding-bottom: 20px; margin: 0 auto;}
.menu li:nth-child(1){ background-color: rgba(243,162,146,1.0);}
.menu li:nth-child(2){ background-color: rgba(174,171,230,1.0);}
.menu li:nth-child(3){ background-color: rgba(220,237,157,1.0);}
.menu li:nth-child(4){ background-color: rgba(255,217,125,1.0);}
.menu li:nth-child(1):hover{ background-color: rgba(243,162,146,0.7);}
.menu li:nth-child(2):hover{ background-color: rgba(174,171,230,0.7);}
.menu li:nth-child(3):hover{ background-color: rgba(220,237,157,0.7);}
.menu li:nth-child(4):hover{ background-color: rgba(255,217,125,0.7);}

/***TOP***/
.waribiki{ display: flex; justify-content: space-between; padding: 25px;
background: linear-gradient(to bottom, #d80042, #eb7a9c); margin-bottom: 10px;}
.waribiki li:nth-child(1) { max-width: 402px; }
.waribiki li:nth-child(2) { max-width: 507px; }
.waribiki li img{ width: 100%; height: auto; }
.tyuuilist{ margin-bottom: 1.0em;}
.simekiri{ color: #FF0000; padding: 10px; border: solid 1px #FF0000;font-size: 30px; text-align: center; margin: 0 auto 30px; width: 80%; box-sizing: border-box;}
.simekiri strong{font-weight: bold;}
.topbanner{ display: flex; justify-content: space-between; margin-bottom: 50px;}
.topbanner li{ width:48%; max-width: 472px; }
.topbanner li img{ width: 100%; height: auto; display: block; }
.topbanner li p{text-align: center; background-color: #4d4d4d; color: #FFFFFF;}
footer{ text-align: center; width: 90%; margin: 0 auto;}
footer p{margin-bottom: 1em;}
footer .logo{ display: block; margin: 0 auto 30px;}

/***NENGA***/
h2.h2nenga{ background-color: #f3a292;}
.designbtn{ display: flex; flex-wrap: wrap; justify-content: space-between;margin-bottom: 50px;/*align-items: center;*/}
.designbtn li{ width: 32.5%; border: solid 1px #CCCCCC; border-radius: 10px; text-align: center; margin-bottom: 10px; background: linear-gradient(to bottom, #FFFFFF, #CCCCCC); font-size: 21px; box-sizing: border-box;font-weight: bold;}
.designbtn li a{ color: #000000; text-decoration: none; display: block; padding: 15px;}
h3 span{ background-color: #db272d; padding: 10px 12px; line-height: 1.0em; color: #FFFFFF; margin-right: 10px;}
p.txt{ margin-bottom: 1em;}
.design{ display: flex; flex-wrap: wrap; justify-content: space-between;margin-bottom: 30px;}
.design li{ width:18%;margin-bottom: 30px;}
.design li.yoko{ width:23.5%;margin-bottom: 30px;}
.design li img{ width: 100%; height: auto;display: block;border: solid 1px #CCC;}
.design li a:hover img{ border: solid 1px #FF0000;}
.design li p{ font-size: 18px; text-align: center; padding: 3px; font-weight: bold;}
.design li p input[type='radio']{ width: 21px; height: 21px; vertical-align: middle; margin-right: 8px;}
.btnarea{ text-align: center;}
input.btn{ font-size: 21px; color: #FFFFFF; font-weight: bold; padding: 20px 50px; border-radius: 10px; text-decoration: none; line-height: 1.0; border: none; margin-bottom: 5px; cursor: pointer;}
input.btn.red{ background-color: rgba(219,39,14,1.0);}
input:hover.btn.red{ background-color: rgba(219,39,14,0.7);}
.bunsyoumds{ font-size: 21px; font-weight: bold; background-color: #A3C2DC; padding: 3px 15px;}
.bunsyou{ width: 100%; margin-bottom: 40px;}
.bunsyou th{ width:7%; background-color: #eef2f9; font-weight: bold; font-size: 18px;padding: 10px; box-sizing: border-box; border-bottom: solid 1px #CCCCCC;text-align: center;}
.bunsyou td{ width:43%; border-bottom: solid 1px #CCCCCC; padding: 10px; box-sizing: border-box;}
.bunsyou th input[type='radio']{ width: 21px; height: 21px; vertical-align: middle; margin-right: 8px;}
.listnenga{ margin-bottom: 30px;}
.listnenga li{ text-indent: -1em;padding-left: 1em;}
.listnenga li:before{ content: "●"; color: #E19697;}

/***MOCHU***/
h3 span.mochu{ background-color: #aeabe6; }
h2.h2mochu{ background-color: #aeabe6; }
.listmochu{margin-bottom: 30px;}
.listmochu li{ text-indent: -1em;padding-left: 1em;text-align: justify;}
.listmochu li:before{ content: "●"; color: #C3B3E1;}
.bunsyou td span{ color:#009944; font-weight: bold; }
input.btn.black{ background-color: rgba(0,0,0,1.0);}
input:hover.btn.black{ background-color: rgba(0,0,0,0.7);}

/***RYOKIN***/
h2.h2ryokin{ background-color: #dced9d; }
.listryokin{ margin-bottom: 30px;}
.listryokin >li{ text-indent: -1em;padding-left: 1em;text-align: justify;}
.listryokin >li:before{ content: "●"; color: #dced9d;}
.ryokinhyo img{ width: 100%;height: auto;display: block; margin-bottom: 40px;}

/***TYUMON***/
h2.h2tyumon{ background-color: #ffd97d; }
.listtyumon{ margin-bottom: 30px;}
.listtyumon >li{ text-indent: -1em;padding-left: 1em; font-size: 18px; font-weight: bold;margin-bottom: 1em;text-align: justify;}
.listtyumon >li:before{ content: "●"; color: #db272d;}
.basiclist >li{ text-indent: -1em;padding-left: 1em;font-size: 16px; font-weight:300;text-align: justify;}
.basiclist >li:before{ content: "・"; }
.mailkyohi{ background-color: #ffd9d4; padding: 15px;margin-bottom: 30px;text-align: justify;}
.mailkyohi strong{ font-weight: bold;}

/***FORM***/
.formbtn{ display: flex;justify-content: center; margin-bottom: 30px;flex-wrap: wrap;}
.formbtn a{ display: block; padding: 30px; width: 45%; text-align: center; font-size: 28px;margin: 10px;border-radius: 20px;color: #000000; text-decoration: none;box-sizing: border-box;}
.formbtn a strong{ font-size: 38px; font-weight: bold;}
.formbtn .nengabtn{ background-color: #f3a292;}
.formbtn .nengabtn span{font-size: 24px;}
.formbtn .mochubtn{ background-color: #aeabe6;}
.formbtn .mochubtn span{font-size: 24px;}

.h2formnenga{ font-size: 24px; font-weight: bold; background-color: #f3a292;margin-bottom: 15px;}
.h2formmochu{ font-size: 24px; font-weight: bold; background-color: #aeabe6;margin-bottom: 15px;}
.formarea{  box-sizing: border-box; padding: 10px;}
.formarea table{ width: 100%;}
.formarea table th{ width:28%; background-color: #FBDAA5;padding: 8px; box-sizing: border-box; border-bottom: solid 1px #FFF;position: relative;font-weight: bold;}
.formarea table th.col{background-color: #F8AB6F;}
.formarea table.insatu th{ background-color: #D0E6ED;}
.formarea table td{ width:72%; padding: 8px; box-sizing: border-box;border-bottom: solid 1px #CCC;}
.formarea table.onamaetable td{ width: 25%;box-sizing: border-box;padding: 5px;border-bottom: solid 1px #CCC;}

#nengaform .formarea{ border:solid 4px #FF6666;margin-bottom: 10px;}
#mochuform .formarea{ border:solid 4px #aeabe6;margin-bottom: 10px;}

.hissu{ background-color: #db272d; color: #FFFFFF; border-radius: 3px; padding: 2px 6px; font-size: 13px; position: absolute; right: 5px;}
.red{ color:#FF0000;}
.gray{ color:#666666;}
.pink{ background-color: #F4CCCC; padding: 4px 8px; border-radius: 3px; font-size: 14px; color: #46001A; margin-top: 5px;box-sizing: border-box;}
input[type='text']{ width: 53px; padding: 5px; border-radius: 5px;border: solid 1px #CCC;font-size: 18px;box-sizing: border-box;}
input[type='text'].midle{ width: 90px;}
input[type='text'].long{ width: 320px;}
input[type='radio']{ width: 20px;height:20px; vertical-align: middle;}
input[type='checkbox']{ width: 20px;height:20px; vertical-align: middle;}
textarea{ width: 100%; padding: 5px;border-radius: 5px;font-size: 18px;box-sizing: border-box;}
select{padding: 5px; border-radius: 5px;border: solid 1px #CCC;font-size: 18px;}
select.selectmb{ margin-bottom: 5px;}
input.inputmb{ margin-bottom: 8px;}

.kigyo{ display: none;}
.kojin{ display: none;}

/***CONFIRM***/
#confirm { width: 100%; margin: 0 auto;}
#confirm table{ width: 100%;}
#confirm table td{color:#3333cc;}

@media screen and (max-width: 1024px) {
	.bunsyou th{ font-size: 14px;}
	.bunsyou td{ font-size: 14px;}
	.bunsyou th input[type='radio']{ margin-right: 0;}
}
@media screen and (max-width: 780px) {
	.hdtitle{ margin: 0 auto 15px;border-bottom: solid 6px #db272d;}
	.hdtitle .titleimg{ width: 60%;}
	.hdtitle .titleimg img{width: 100%; height: auto;}
	.hdtitle .nengou{ font-size: 18px;}
	.hdtitle .nengou span{font-size: 32px;}
	.gototop{ font-size: 14px; margin: 0 auto 20px;}
	.menu li p{font-size: 18px; padding: 20px 0 5px;}
	.menu li img{width: 16px; height: auto;padding-bottom: 16px;}
	h1.h1mds{ font-size: 21px;padding: 8px;}
	.simekiri{ padding: 10px; font-size: 21px; margin: 0 auto 15px; width: 100%;}
	h2{ font-size: 16px;padding: 5px 10px;margin-bottom: 15px;}
	.designbtn{margin-bottom: 30px;}
	.designbtn li{font-size: 16px;}
	.designbtn li span{ font-size: 12px;}
	.designbtn li a{padding: 10px;}
	h3{ font-size: 18px; margin-bottom: 20px;}
	.design li p{ font-size: 16px; padding: 3px; }
	.design li p input[type='radio']{ width: 19px; height: 19px; margin-right: 5px;}
	.bunsyoumds{ font-size: 16px;padding: 3px 10px;}
	.bunsyou{ margin-bottom: 30px;}
	.bunsyou tr{display: flex; flex-wrap: wrap;}
	.bunsyou th{display: block; width: 12%;}
	.bunsyou td{display: block; width: 88%;}
	.bunsyou th input[type='radio']{ width: 19px; height: 19px;margin-right: 3px;}
	input.btn{ font-size: 18px; padding: 14px 35px; margin-bottom: 5px; }
	footer .logo{ width: 180px; height: auto;margin: 0 auto 15px;}
	.formbtn{ display: flex;justify-content: space-between;}
	.formbtn a {padding: 2%;width: 48%;font-size: 18px;margin: 1%;}
	.formbtn a strong{ font-size: 24px; }
	.h2formnenga{ font-size: 18px;}
	.h2formmochu{ font-size: 18px;}
	.formarea table th{ width: 100%; display: block;font-size: 14px; padding: 5px 3px;}
	.formarea table td{ width: 100%; display: block;font-size: 14px; padding: 5px 0 12px 0;}
	.formarea table.onamaetable td{ display: table-cell; font-size: 12px; padding: 5px 1px;}
	.formarea table.onamaetable td input{ width: 100%;}
}
@media screen and (max-width: 480px) {
	.sp{ display: block;}
	.topmain{ margin: 0 auto 25px;}
	.hdtitle{ margin: 0 auto 10px; border-bottom: solid 1px #db272d;}
	.hdtitle .nengou{ font-size: 14px;}
	.hdtitle .nengou span{font-size: 21px;}
	.gototop{ font-size: 12px; margin: 0 auto 15px;max-width: 95%;}
	.contents{ width: 1000px; max-width: 90%; margin: 0 auto 25px;}
	nav{ margin-bottom: 25px;}
	.menu li p{font-size: 14px; padding: 15px 0 5px;}
	.menu li img{width: 12px; height: auto;padding-bottom: 12px;}
	h1.h1mds{ font-size: 18px;padding: 6px;margin-bottom: 15px;}
	.waribiki{ flex-direction: column;padding: 15px;}
	.waribiki li:nth-child(1) { margin-bottom: 10px; }
	.simekiri{ padding: 10px; font-size: 18px; margin: 0 auto 20px; width: 100%;}
	.topbanner{ flex-direction: column;margin-bottom: 5px;}
	.topbanner li{ width:100%; margin-bottom: 20px;}
	.topbanner li p{ font-size: 14px;}
	footer p{font-size: 14px;}
	footer .logo{ width: 150px; height: auto;margin: 0 auto 15px;}
	.copyright{ font-size: 12px;}
	#page_top {right: 20px;}
	#page_top img{ width: 40px; height: auto;}
	h2{ font-size: 14px;padding: 3px 5px;margin-bottom: 12px;}
	.designbtn{margin-bottom: 20px;}
	.designbtn li{ width: 49%; font-size: 12px; padding: 5px 5px;margin-bottom: 5px;}
	.designbtn li span{ font-size: 10px;}
	.designbtn li a{padding: 5px;}
	h2 span{display: block;font-weight: normal; font-size: 12px;}
	h3{ font-size: 14px; margin-bottom: 15px;}
	p.txt{ font-size: 12px;}
	.design li{ width:32%;margin-bottom: 20px;}
	.design li.yoko{width:47%;margin-bottom: 20px;}
	.design li p{ font-size: 14px; padding: 3px; }
	.design li p input[type='radio']{ width: 17px; height: 17px; margin-right: 5px;}
	.bunsyoumds{ font-size: 14px;padding: 2px 8px;}
	.bunsyou{ margin-bottom: 20px;}
	.bunsyou th{padding: 5px;}
	.bunsyou th input[type='radio']{ width: 17px; height: 17px;margin-right: 3px;}
	.bunsyou td{ font-size: 12px; padding: 5px 0 7px 5px; text-align: justify;}
	input.btn{ font-size: 16px; padding: 14px 20px;width: 100%; margin-bottom: 5px; }
	.damy{ display: none;}
	.listnenga li{ font-size: 14px;}
	.listmochu li{ font-size: 14px;}
	.listryokin >li{ font-size: 14px;}
	.listtyumon >li{ text-indent: -1em; padding-left: 1em; font-size: 16px; font-weight: bold; margin-bottom: 1em;}
	.basiclist >li{ text-indent: -1em; padding-left: 1em; font-size: 14px; font-weight:300;}
	.mailkyohi{ padding: 10px 15px;margin-bottom: 30px;font-size: 14px;}
	.formbtn{ flex-direction: column;}
	.formbtn a{ padding: 15px; width: 100%; font-size: 16px; margin: 10px 0;}
	.formbtn a strong{ font-size: 18px; }
	.formbtn .nengabtn span,.formbtn .mochubtn span{font-size: 18px;}
	.hissu{ font-size: 11px;}
	.pink{font-size: 12px;}
	.h2formnenga{ font-size: 16px;}
	.h2formmochu{ font-size: 16px;}
	input[type='text']{ font-size: 14px;}
	input[type='text'].long{ width: 100%;}
	textarea{ font-size: 14px;}
	select{ font-size: 14px;}
}
@media screen and (max-width: 375px) {
	.designbtn li{}
	.designbtn li span{ display: block;}
}