@charset "UTF-8";

/*  グリッド全体の設定
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin:1rem;
    font-size: 62.5%;
}

body {
    color: #333631;
    font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    background:#fff;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.6;
    margin:0;
	padding:0;
}

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}

/* リンク
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
    display:block;
    color:#333631;
    text-decoration-line: none;
}
a:hover { 
    color: #999;
}

/* 見出し
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 300;
    letter-spacing: 0.1em;}
  h1 { font-size: 3.2rem; line-height: 1.2;  letter-spacing: -.1rem;}
  h2 { font-size: 3.0rem; line-height: 1.25; letter-spacing: -.1rem; }
  h3 { font-size: 2.8rem; line-height: 1.3;  letter-spacing: -.1rem; }
  h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
  h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
  h6 { font-size: 1.8rem; line-height: 1.6;  letter-spacing: 0; }
  
  /* PC表示 */
  @media (min-width: 550px) {
    h1 { font-size: 3.0rem; }
    h2 { font-size: 2.8rem; }
    h3 { font-size: 2.5rem; }
    h4 { font-size: 2.0rem; }
    h5 { font-size: 1.8rem; }
    h6 { font-size: 1.8rem; }
  }
  
  p {
    margin-top: 0; }
  

/*ヘッダー PC表示
-------------------------------------*/
.header {
	display: flex;
    flex-direction: row;
    padding: 0 0 0 0;
}
.header-box {
	margin-left: auto;
	margin-top: 0.8rem;
}
#lang {
  font-size: 1.5rem;
	padding: 0;
  text-align: center;
  display: flex;
}
nav ul {
	  display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
	  margin: 0 0 0 0;
}
nav li {
	flex: 1 0 auto;
}
nav li a {
    text-decoration: none;
    text-align: center;
    width: 100%;
}
nav a:hover {
    background-color: #f7f7f7;    
}
nav a {
    padding: 0;
}

@media screen and (min-width: 768px){
/* PC時はMENUボタンを非表示 */
#open,#close {
    display: none !important;
}

#navi {
    display: block !important;
}
}

/*ヘッダー スマホ
-------------------------------------*/
@media screen and (max-width: 768px){
.header {
	flex-direction: column;
    margin-bottom: 1rem;
}
.header #open,#close  {
    position: absolute;
    top: 2rem;
    right: 1.2rem;
}
nav ul {
	flex-direction: column;
}
.header li {
	padding-top: 0;
}
/* スマホ時はMENUボタンを表示 */
#open,#close  {
    display: block;
    width: 5rem;
    border: none;
    position: absolute;
    top: 2rem;
    right: 1.2rem;
}
/* スマホ時はメニューを非表示 */
#navi {
    display: none;
}
}

/*ここからbody 
--------------------------------*/
.choose_box {
position: relative;
height: 2rem;
width: 100%;
}
.choose_box p {
  font-size: 2rem;
  display: block;
  font-weight: 600;
  text-align: center;
  margin:3% 0% auto auto;
  color: dodgerblue;
}
.caption {
  width: 80%;
  clear: both;
  padding: 0.5rem 0.5rem;
  margin: 0 auto 1% auto;
  color: dodgerblue;
  background: #e7f9fc;/*背景色*/
  border-top: solid 6px royalblue;
  box-shadow: 0 3px 4px rgba(81, 130, 177, 0.32);/*影*/
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
}
.caption > p {
  width: 80%;
  font-size: 2rem;
  display: block;
  font-weight: 600;
  text-align: center;
  margin: auto;
  padding: 0;
  color: dodgerblue;
}

/*注意書き*/
h6 {
  font-size: 1rem;
  text-align: center;
  color: #333631;
}
.notice {
  font-size: 1rem
}
.click > p {
  width: 100%;
  font-size: 1.5rem;
  display: block;
  font-weight: 600;
  text-align: center;
  margin: 2% auto;
  color: dodgerblue;	
}
.choose_box ul {
  width: 100%;
  text-align: center;
  margin: 2% auto;
 display:block;
 flex-wrap: wrap;
}
.choose_box ul li {
 width: 80%;
 margin: 2% auto;
 list-style: none;
}

.choose_box ul li:nth-child(2n) {
 margin: 2% auto;
}
.choose_box ul li a {
color: #fff;
display: block;
padding: 1% 1%;
text-align: center;
background-color: royalblue;
font-weight: 600;
font-size: 1.5rem;
border: 2px solid #2791d4;
text-decoration: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

.choose_box ul li a:hover {
 background-color: #fff;
 color: dodgerblue;
  -webkit-transition: 0.7s;
  -moz-transition: 0.7s;
  -o-transition: 0.7s;
  transition: 0.7s;
}

h4 {
  width: 70%;
  clear: both;
  padding: 1rem;
  margin: 1% auto;
  color: dodgerblue;
  background: #e7f9fc;/*背景色*/
  border-top: solid 6px #1dc1d6;
  box-shadow: 0 3px 4px rgba(81, 130, 177, 0.32);/*影*/
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
}

.fit {
position: absolute;
left: 0;
top: 1rem;
width: 100%;
}

#q_06 span,#q_07 span,#q_08 span,#q_09 span,#q_10 span,#q_11 span,#q_12 span,#q_13 span,#q_14 span,#q_15 span,#q_16 span,#q_17 span,#q_18 span,#q_19 span,#q_20 span,#q_21 span,#q_22 span,#q_23 span,#q_25 span {
display: block;
width:100%;
}
#q_06 a,#q_07 a,#q_08 a,#q_09 a,#q_10 a,#q_11 a,#q_12 a,#q_13 a,#q_14 a,#q_15 a,#q_16 a,#q_17 a,#q_18 a,#q_19 a,#q_20 a,#q_21 a,#q_22 a,#q_23 a,#q_24 a,#q_25 a {
display: block;
width:100%;
text-align: center;
}

/* opacity透明度のこと */
.opas {
		opacity: 1 !important;
}
.click {
	-webkit-animation: click .6s linear;
	animation: click .6s linear;
}
@keyframes click {
	0% {transform: scale(1);}
	15% {transform: scale(.975);}
	100% {transform: scale(1);}
}
@-webkit-keyframes click {
	0% {-webkit-transform: scale(1);}
	15% {-webkit-transform: scale(.975);}
	100% {-webkit-transform: scale(1);}
}
@media (min-width: 768px) {
		.questions > li .select {
				letter-spacing: -.4em;
				font-size: 0;
		}		.questions > li .select > p {
				font-size: 15px;
				letter-spacing: normal;
				display: inline-block;
				width: 48.5%;
				margin-right: 3%;
		}		.questions > li .select > p:nth-child(even) {
				margin-right: 0;
		}}

/* グリッド
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
    margin: 0 auto;
    max-width: 120rem;
    padding: 0;
    position: relative;
}
/* ブロックを縦に表示 */
.row {
    display: flex;
    flex-direction: column;
    padding: 0;
    width: 100%;
}

.col {
    display: block;
    flex: 1 1 auto;
    margin: 0;
    max-width: 100%;
    width: 100%;
}
/* 768px以上の表示 */
@media ( min-width : 768px ) {
.row {
    display: flex;
    flex-direction: row;
    padding: 0;
}
.col {
    margin-left: 4%;
}
	
.col:first-child { 
    margin-left: 0; 
}

.row .col.span-1 {
    flex: 0 0 100%;
    max-width: 100%;
}
}


/* ボタン
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 3.8rem;
  padding: 0 3rem;
  color: #555;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  line-height: 3.8rem;
  letter-spacing: .1rem;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0; }



/* リスト
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* コード
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* スペース
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 1rem; }