@charset "utf-8";
/*  common
----------------------------------------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap");

html,body{font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif; background:#fff; -webkit-font-smoothing:antialiased;}

html { font-size: 16px; scroll-padding-top: 100px; scroll-behavior: smooth; line-height:1.61; letter-spacing: 0.1em;}
body{background:url(main-bg.jpg) top center repeat-x;}
a{text-decoration: none;}
img{width: auto; max-width: 100%; margin: 0; padding: 0; vertical-align: bottom;}
.flex{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
.flex2{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap;}

strong{font-weight: bold;}
small{ font-size: 50%;}

.red{color: #f00;}


/*  main
----------------------------------------------------------------------------------------------------------- */
.header-line{background:url(header-bg.jpg) top center repeat-x; padding: 10px 0; display: -webkit-flex; display: flex; -moz-background-size:auto 100%; background-size: auto 100%; height: 150px;}
.header-line .header-logo{width: 20%; max-width: 500px; text-align: center; display:block; margin-top: 50px;}

h1{font-size: clamp(16px,5.2vw,50px); text-align: center; color: #fff; -webkit-flex: 1; flex: 1; padding-top: 40px; margin-left: 0%;
text-shadow: 
    #dbbb56 2px 0px 11px, #dbbb56 -2px 0px 11px,
    #dbbb56 0px -2px 11px, #dbbb56 -2px 0px 2px,
    #dbbb56 2px 2px 11px, #dbbb56 -2px 2px 2px,
    #dbbb56 2px -2px 11px, #dbbb56 -2px -2px 2px,
    #dbbb56 1px 2px 11px, #dbbb56 -1px 2px 2px;
}
h2{font-size: clamp(16px,3vw,30px); text-align: left; padding: 10% 0 3% 0; color: #760f0a;}
h2.result-title{font-size: clamp(16px,3.5vw,30px); text-align: left; padding: 5% 0 3% 0; color: #760f0a;}

.cont-box{width: 90%; max-width: 900px;  margin: 0 auto;}

@media screen and (max-width: 800px) {

.header-line{background:url(header-bg.jpg) top center repeat-x; padding: 1.5% 0; -moz-background-size:auto 100%; background-size: auto 100%; height: auto;}
.header-line .header-logo{width: 15%; margin-top: 0;}
h1{font-size: clamp(16px,5.2vw,50px); padding-top: 3%; margin-left: 0%;}

}


a{ color:#760f0a; }
a:visited { color:#760f0a; }
a:hover { color:#ee4339;}
a:active { color:#760f0a; }


/*  read
----------------------------------------------------------------------------------------------------------- */

.read{width: 98%; margin: 10% auto 0 auto; border-bottom: solid 1px #969da3; padding-bottom: 3%; line-height:1.61;}

a.pointlink{ text-decoration: none; background: #760f0a; color:#fff; display:inline-block; padding: 2px 6px; margin-right:2px; }
a.pointlink:visited { color:#fff; }
a.pointlink:hover { background: #ee4339; color:#fff;}
a.pointlink:active { color:#fff; }

/*  pullDown
----------------------------------------------------------------------------------------------------------- */
.selectbox-cpname {position: relative;}
.selectbox-cpname select{}
.selectbox-cpname::before,
.selectbox-cpname::after { position: absolute; content: ''; pointer-events: none;}
.selectbox-cpname::before { right: 0; display: inline-block; width: 2.8em; height: 2.8em; border-radius: 0 3px 3px 0; background: #760f0a; content: '';}
.selectbox-cpname::after { position: absolute; top: 50%; right: 1.4em; transform: translate(50%, -50%) rotate(45deg); width: 6px; height: 6px; border-bottom: 3px solid #fff; border-right: 3px solid #fff; content: '';}
.selectbox-cpname select { width: 100%; overflow: hidden; appearance: none; -webkit-appearance: none; -moz-appearance: none; min-width: 230px; height: 2.8em; padding: .4em 3.6em .4em .8em; border: 2px solid #760f0a; border-radius: 3px; color: #999; font-size: 1em; cursor: pointer; background: #fff;}
.selectbox-cpname select:focus { outline: 1px solid #760f0a;}




/*  inputText
----------------------------------------------------------------------------------------------------------- */
.textbox { width: calc(100% - 22px); padding: 8px 10px; border: 1px solid #969da3; border-radius: 3px; color: #000; font-size: 1em; line-height: 1.5;}
.textbox::placeholder { color: #999;}

/*  btn
----------------------------------------------------------------------------------------------------------- */
.btn-type1{ width: calc(50% - 2px); max-width:298px; border: solid 1px #000; margin: 5% auto; border: solid 1px #000; background:#3a3a3a;}
input[type="image"]{width:100%;}
.btn-type1 input[type="image"]:hover{opacity:0.65; }


/* notice
----------------------------------------------------------------------------------------------------------- */
.notice-title{font-size: 120%; margin-bottom:2%; border-left: solid 10px #760f0a; border-bottom: solid 1px #760f0a; padding:0 0 3px 5px; color: #760f0a;}
.notice{width:98%; margin: 10% auto 0 auto;  font-size: 95%; }
.notice li{text-indent: -20px; margin-left:15px; line-height:1.61; padding-bottom: 1%;}
.notice-ss{margin:1% 0 1% 15px;}

/* error
----------------------------------------------------------------------------------------------------------- */
#error-txt{width:88%; max-width:500px; margin: 0 auto; border: solid 1px #f00; margin-top: 5%; color: #f00; padding: 5%; line-height:1.61; background:rgba(255,255,255,0.65);}


/* footer
----------------------------------------------------------------------------------------------------------- */
.footer{background:#3a3a3a; color: #fff; text-align: center; font-size: clamp(10px,3vw,16px); margin-top: 5%; padding: 5% 0;}


/* result
----------------------------------------------------------------------------------------------------------- */
.result1{font-size: clamp(16px,4vw,30px); font-weight: 600; padding: 1% 0 5% 0; color: #3a3a3a;}
.result2{font-size: clamp(14px,4vw,25px); padding: 5% 5% 0 0; line-height:1.61;}
.result3 li{font-size: clamp(16px,4vw,30px); font-weight: 600; line-height:1.61; color: #3a3a3a;}