@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Montserrat:wght@400;500;600;700&display=swap');

*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size:16px;
font-weight: 300;
text-align:left;
background: #f8f8f8;
color:#1a1a1a;
min-width:1140px;
}
@media screen and (max-width:767px){
html,body{ font-size:3.5vw; min-width:240px; max-width:767px; overflow-x: hidden;}
}

img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{margin:0 auto; text-align:center;}
@media screen and (max-width:767px){
}

p{ line-height:1.75em; margin:0 0 1em; padding:0;}
p:last-child{ margin:0;}
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: all 0.3s ease;}
.opa:hover{ opacity: 0.7;}
@media screen and (max-width:767px){
}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

.clear{ clear:both;}
.clearfix:after{ margin:0; padding:0; visibility:hidden; content:"."; display:block; line-height:0; clear:both;}

/*ヘッダー*/

/*フッター*/
#sns{ background: #ccc; padding: 70px 0; text-align: center;}
#sns ul{ letter-spacing: -1em;}
#sns ul li{ display: inline-block; vertical-align: middle; letter-spacing: 0; width: 300px; margin: 0 40px;}
#sns ul li span{ display: inline-block; vertical-align: middle; line-height: 0; margin-right: 20px;}
#sns ul li strong{ display: inline-block; vertical-align: middle;}
#sns ul li a{ display: block; padding: 15px 30px 15px 15px; font-size: 20px; font-weight: bold; border-bottom: 1px solid #000; position: relative;}
#sns ul li a:after{ content: ">"; font-weight: normal; position: absolute; right: 15px; transition: 0.3s;}
#sns ul li a:hover:after{ right: 5px;}
#footer_service_list ul{ letter-spacing: -1em;}
#footer_service_list ul li{ display:inline-block; vertical-align: middle; letter-spacing: 0; width: 33.3333%; text-align: center; color: #fff;}
#footer_service_list ul li a{ display: block; height: 220px; position: relative; z-index: 1;}
#footer_service_list.camp24 ul li{ width: 50%;}
#footer_service_list ul li.bg01 a{ background: url("../images/foot_bg01.jpg") center center no-repeat; background-size: cover;}
#footer_service_list ul li.bg02 a{ background: url("../images/foot_bg02.jpg") center center no-repeat; background-size: cover;}
#footer_service_list ul li.bg03 a{ background: url("../images/foot_bg03.jpg") center center no-repeat; background-size: cover;}
#footer_service_list ul li.bg04 a{ background: url("../images/foot_bg04.jpg") center center no-repeat; background-size: cover;}
#footer_service_list ul li a p{ position: absolute; left: 0; right: 0; top: calc(50% - 0.5em); width: auto; font-size: 28px; line-height: 1em; font-weight: bold; font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif; z-index: 3;}
#footer_service_list ul li a p:after{ content: ">"; margin-left: 0.5em;}
#footer_service_list ul li a:after{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0); transition: 0.3s;}
#footer_service_list ul li a:hover:after{ background: rgba(0,0,0,0.5);}
#footer{ background: #1a1a1a; color: #fff; padding: 20px; text-align: center;}
#footer ul{ letter-spacing: -1em; margin-bottom: 1em;}
#footer ul li{ display: inline-block; vertical-align: middle; letter-spacing: 0; margin: 0 15px;}
#footer ul li a{ display: block; position: relative;}
#footer ul li a:after{ content: ">"; display: inline-block; margin-left: 0.5em;}
#footer ul li a:before{ content: ""; width: 0; height: 1px; background: #fff; position: absolute; left: 0; right: 0; bottom: 0; margin: auto; transition: 0.3s;}
#footer ul li a:hover:before{ width: 100%;}
#footer p.copy{ font-size: 14px; line-height: 1.25em;}
@media screen and (max-width:767px){
#sns{ padding:7.5% 2.5%;}
#sns ul li{ width:45%; margin:0 2.5%;}
#sns ul li span{ margin-right:0.5em;}
#sns ul li span img{ height: 6vw;}
#sns ul li a{ padding:0.5em 1.5em 0.5em 0.5em; font-size:4vw;}
#sns ul li a:after{ right:0.5em;}
#sns ul li a:hover:after{ right:0.5em;}
#footer_service_list ul li{ display:block; width: 100%;}
#footer_service_list ul li a{ height:30vw;}
#footer_service_list ul li a p{ font-size:4.5vw;}
#footer_service_list.camp24 ul li{ display:inline-block;}
#footer_service_list.camp24 ul li a{ height:25vw;}
#footer{ padding:5%;}
#footer ul li{ margin:0 1em;}
#footer p.copy{ font-size:2.5vw;}
}

/*メイン*/
#wrapper{ /*max-width: 1440px;*/ min-height: 100vh; margin: 0 auto;}
#content{ width: 100%; margin: 0 auto;}
section{ width:100%; margin:0 auto; padding: 120px 0;}
section:first-child{ padding-top: 80px;}
.maincontent { padding:0; margin:0 auto; width:1140px;}
@media screen and (max-width:767px){
#content{ width: 100%; margin: 0 auto;}
section{ margin:0 auto; padding: 12.5% 0;}
section:first-child{ padding-top: 7.5%;}
.maincontent { padding:0; margin:0 auto; width:90%;}
}

/*campb*/
#mv{ padding: 0; width: 100%; height: 100vh; background: url("../images/mv.jpg") center center no-repeat; background-size: cover;position: relative;}
#mv figure.logo{ position: absolute; left: 0; right: 0; top: 50%; margin: auto; text-align: center; transform: translateY(-50%);}
@media screen and (max-width:767px){
#mv figure.logo{ width: 50%;}
}

/*lead*/
#lead{ text-align: center;}
#lead h2{ font-size: 21px; letter-spacing: 0.1em; line-height: 1.25em; font-weight: normal; margin-bottom: 40px;}
#lead p{ text-align: center; letter-spacing: 0.1em;}
@media screen and (max-width:767px){
#lead h2{ font-size:4.5vw; margin-bottom:5%;}
#lead p{ letter-spacing:0.05em;}
}

/*form*/
#form{ background: #fff; width: 940px; margin: 120px auto 0; padding: 75px 100px; box-shadow:rgba(102, 102, 102, 0.1) 0 0 10px 0;}
#form p{ text-align: center; margin-bottom:0;}
#form table{ width: 100%; margin: 40px auto 0; text-align: center;}
#form table th{ display: block; width: 100%; font-weight: bold; padding: 0 0.5em 0.5em;} 
#form table td{ display: block; width: 100%; padding: 0.5em; border-bottom: 1px solid #d9d9d9; margin-bottom: 40px;}
@media screen and (max-width:767px){
#form{ width:100%; margin:12.5% auto 0; padding:5%;}
#form p{ letter-spacing:0;}
#form table{ margin:5% auto 0;}
#form table td{ padding:0 0.5em 0.5em; margin-bottom:5%;}
}
#form ::placeholder{ color: #aaa;}
#form ::-ms-input-placeholder{ color: #aaa;}
#form input[type=submit], #form select, #form button{ -webkit-appearance: none;}
#form input, #form select, #form textarea, #form button{ width:100%; padding:0.5em 1em; font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif; font-size:16px; line-height: 1.25em; border: none; box-sizing: border-box; text-align: center;}
#form textarea{ text-align: left; height: 10em; font-weight: normal;}
@media screen and (max-width:767px){
#form input, #form select, #form textarea, #form button{ font-size:3.5vw; padding:0.5em;}
#form textarea{ height: 8em;}
}
#form #submit_btn{ text-align: center; margin-top: 20px;}
#form #submit_btn button{ display: inline-block; width: auto; background: #808080; color: #fff; letter-spacing: 0.1em; font-weight: 500; padding: 0.75em 5em; cursor: pointer; transition: 0.3s;}
#form #submit_btn button:hover{ opacity: 0.7;}
@media screen and (max-width:767px){
#form #submit_btn{ margin-top:5%;}
}



@media print, screen and (min-width:768px){
.smp{ display:none !important;}
}
@media screen and (max-width:767px){
.pc{ display:none !important;}
}
