@charset "UTF-8";

/*-------------------------
__member_style
-------------------------*/

#contents .member{ color:#005032; margin-bottom:20px; font-size:24px; line-height:30px; font-weight:700; letter-spacing:0.1em; text-align:center;}
#contents .member span{ display:inline-block; position:relative; padding-top:10px;}
#contents .member span::before{ content:""; width:4px; height:4px; background-color:#005032; position:absolute; top:0; right:0; left:0; margin:auto; border-radius:10px;}

.attention{ color: #c33938; margin:0 auto 15px; font-size: 20px; font-weight: 700; text-align: center;}
.attention p{ display: inline; border-bottom: 3px solid #c33938; padding:0 0 5px;}

.introduction{}
.introduction .inner{ display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; margin-top:40px;}
.introduction h2{ text-align:center;}
.introduction h2 em{}
.introduction dl{ display:inline-block; width:100%; background-color:#FFF; margin-bottom:20px; padding:30px; box-sizing:border-box; border-radius:5px; letter-spacing:normal;}
.introduction dl dt{ position:relative; padding:0 0 10px 30px; font-size:22px; line-height:28px; font-weight:700;}
.introduction dl dt span{ display:inline-block; height:1em; border-right:1px solid #ddd; position:absolute; top:6px; bottom:0; left:0; padding-right:10px; font-size:12px; line-height:1;}
.introduction dl dd{ padding-left:30px; box-sizing:border-box;}
.introduction dl dd em{ color:#c33938; font-weight:700;}
.introduction dl dd .appeal{ color:#005032; border:3px solid #005032; position:relative; margin-bottom:15px; padding:5px 10px; box-sizing:border-box; border-radius:10px; font-size:20px; line-height:26px; font-weight:700; text-align:center;}
.introduction dl dd .appeal:before{ content:""; border:10px solid transparent; border-top:10px solid #FFF; position: absolute; bottom: -20px; left: 50%; z-index:2; margin-left:-8px;}
.introduction dl dd .appeal:after { content:""; border:12px solid transparent; border-top: 12px solid #005032; position: absolute; bottom: -26px; left: 50%; z-index:1; margin-left:-10px;}

.form_box_top{ }
.form_box_top h2{ font-size:20px; font-weight: 700; width:100%; color:#ffffff; padding:0.8em; box-sizing:border-box; display:inline-block; line-height:1.3; background:#005032; vertical-align:middle; border-radius:30px 0px 0px 30px; margin: 30px auto 20px;}
.form_box_top h2:before { content: '●'; color: #eeeeee;; margin-right: 12px;}
.form_box_top ul{ margin:0 auto; text-align:left;}
.form_box_top ul li{ padding-left:1em; font-size:14px; line-height:20px; letter-spacing:0.1em; text-indent:-1em; margin-bottom: 15px;}
.form_box_top ul li + li{ margin:0 0 15px;}
.form_box_top .asterisk{ display:inline-block; color:#FFF; background-color:#c33938; margin:0 5px; padding:0 15px; box-sizing:border-box; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; font-size:14px; line-height:20px; font-weight:700; text-align:center; text-indent:initial;}
@media all and (-ms-high-contrast: none){
.form_box_top .asterisk{padding-left: 2em;font-family: sans-serif;}
}
.form_box_top em{ color:#c33938; font-weight:700;}

.form_box .date span{ display:inline-block; margin-right:10px; padding-top:5px; vertical-align:top;}
.form_box .desired span{ display:inline-block; width:6em; margin-right:10px; padding-top:5px; vertical-align:top; text-align:right;}
.form_box .tel span{ display:inline-block; width:6em; margin-right:10px; padding-top:5px; vertical-align:top; text-align:right;}
.form_box .tel input{ margin-bottom:10px;}
.form_box .referral span{ display:inline-block; width:4em; margin-right:10px; padding-top:5px; vertical-align:top; text-align:right;}
.form_box .referral input{ margin-bottom:10px;}

#contents .login_box{ margin-top:70px;}
#contents .login_box h2{ font-size:20px; font-weight: 700; width:100%; color:#ffffff; padding:0.8em; box-sizing:border-box; display:inline-block; line-height:1.3; background:#005032; vertical-align:middle; border-radius:30px 0px 0px 30px; margin-bottom:30px;}
#contents .login_box h2:before { content: '●'; color: #eeeeee;; margin-right: 12px;}
#contents .login_box a{ color:#808080; font-size:13px; line-height:16px; text-decoration:underline;}

#contents .login_box .btn{ margin:30px 0 0; text-align:center;}
#contents .login_box .btn a{ display:inline-block; color:#FFF; background-color:#aa910e; box-shadow: 4px 4px #BBB; position:relative; margin:0 auto; padding:15px 40px; box-sizing:border-box; border-radius: 5px; font-size:18px; line-height:1; font-weight:700; text-decoration:none;}

#member_login_touroku.member_login{ margin: 40px auto 0; text-align: center;}
#member_login_touroku.member_login a{display: inline-block; font-size: 15px; line-height: 13px; padding: 15px 20px; border-radius: 5px; border: 2px solid #005032; text-decoration: none; font-weight: 700; color: #005032; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
#member_login_touroku.member_login a:hover{background-color: #005032; color: #fff;}

.invalid{ color: #c33938;}

.domain_box{ border: 2px solid #c33938; padding: 15px; box-sizing: border-box; color: #c33938; text-align: center; margin-top: 15px;}
.domain_box p.com01{ font-size: 13px; line-height: 18px; margin-bottom: 10px;}
.domain_box p.com02{ font-size: 18px; line-height: 21px; font-weight: 700;}

.campaign_banner{ margin-bottom: 40px;}
.campaign_banner img{ width: 100%; height: auto;}

#contents .form_box .hope_line_wrap{display: flex;padding: 10px 0 0!important;}
#contents .form_box .hope_line_wrap:last-child{padding: 10px 0!important;}
#contents .form_box .hope_line_wrap .hope_select_wrap{width: 80%;display: flex;}
#contents .form_box .hope_line_wrap .hope_select_wrap dt{width: 78px;}
#contents .form_box .hope_line_wrap .hope_select_wrap dd{display: flex;align-items: baseline;width: calc(100% - 78px);}
#contents .form_box .hope_line_wrap .hope_select_wrap .select_box:last-child {margin-left: 5px;}
#contents .form_box .hope_line_wrap .clear input[type="button"]{padding: 8px 10px;}
#contents .form_box form .inner .normal tr td.name input[type="text"]{margin-right: 10px;}
#bbform .inner .normal tr td .mt_10 .radio div select {display: block;padding: 7px 14px 7px 8px;}

/*タブレットここから*/
@media screen and (max-width: 1024px){
.hope_line_wrap .hope_select_wrap{width: calc(100% - 58px);}
}

/*スマホここから*/
@media screen and (max-width: 767px) {

#contents .member{ margin-bottom:10px; font-size:20px; line-height:26px;}
    
.attention{ color: #c33938; margin:0 auto 15px; font-size: 16px; line-height: 30px;}
.attention p{ display: inline; border-bottom: 2px solid #c33938;}
.attention p span{}

.introduction{}
.introduction .inner{ display:block; margin-top:20px;}
.introduction dl{ padding:20px;}
.introduction dl dt{ font-size:20px; line-height:26px;}
.introduction dl dd{ padding-left:0;}
.introduction dl dd .appeal{ font-size:18px; line-height:24px; text-align:left;}

.form_box_top{}
.form_box_top h2{ font-size:17px; padding:0.6em; border-radius:30px 0px 0px 30px; margin-bottom:20px;}
.form_box_top h2:before { content:'●'; color:#eeeeee;; margin-right:12px;}
.form_box_top ul li{ font-size:13px; line-height:19px; margin-bottom: 0;}
.form_box_top .asterisk{ padding:0 10px; font-size:13px; line-height:19px;}

.form_box .date span{ padding:0;}
.form_box .desired span,
.form_box .tel span,
.form_box .referral span{ width:auto; padding:0; text-align:left;}

.domain_box p.com01{}
.domain_box p.com01 span{ display: block;}

.campaign_banner{ margin-bottom: 10px;}

#contents .form_box .hope_line_wrap .hope_select_wrap{width: 100%;display: block;}
#contents .form_box .hope_line_wrap .hope_select_wrap dt{width: auto;}
#contents .form_box .hope_line_wrap .hope_select_wrap dd{width: 100%;display: block;text-align: center;}
#contents .form_box .hope_line_wrap .hope_select_wrap .select_box {width: 100%;}
#contents .form_box .hope_line_wrap .hope_select_wrap .select_box:first-child {margin-bottom: 10px;}
#contents .form_box .hope_line_wrap .hope_select_wrap .select_box:last-child{margin-left: 0;}
#contents .form_box .hope_line_wrap .clear{text-align: center;padding-top: 10px;}
#contents .form_box form .inner .normal tr td.name input[type="text"]{width: 100%;margin-right: 0;}
}