/* CSS Document */


body { 
margin: 0px; 
padding: 0px;
background-image: url(/images/bg_header.png);
font-family:arial,Leelawadee,thonburi,Segoe UI,Hiragino Sans GB,Microsoft YaHei,Hiragino Sans CNS,Microsoft JhengHei,Noto Sans KR,Meiryo,sans-serif;
-webkit-text-size-adjust: 100%;
color:#555;
}

.pc {display: none;}


/***********************************************/
/*　header ロゴ・パンくず 　　                 */
/***********************************************/

.logo {
	display: flex;
    justify-content: center;
	margin:76px 0px 26px 0px;
}
.logo a{
	transition : .3s;
}
.logo a:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: "alpha(opacity=50)";
  transition : .3s;
}


.breadcrumb {
	background:#FFF;
	border-top:#eeeeee solid 2px;
	padding:14px 6px 13px 6px;
	margin:0 14px 40px 14px;
	font-size:74%;
	text-align:center;
	color:#5580ba;
}
.breadcrumb a{
	color:#666;
	text-decoration:none;
	transition : .3s;
}
.breadcrumb a:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: "alpha(opacity=50)";
  transition : .3s;
}
.breadcrumb span{
	margin:0px 8px;
}



/***********************************************/
/*　TOP 言語選択　  　                         */
/***********************************************/

.language{
	margin:0px 6px 0px 20px;
	padding:0;
}
.language p{font-size: 92%;
line-height: 186%;
}	
.language h1{font-size:110%;
    line-height: 120%;
	color:#333;
	margin: 50px 0 36px 0;
	text-align:center;
}


.language2{
	width: 100%;
    margin: 0px auto;
	padding:0 0 100px 0;
}	
.language2 ul {
display: block;
text-align:center;
list-style: none;
padding:0;
margin:0;
}
.language2 li a{
	font-size: 106%;
	line-height:236%;
text-decoration:none;
color:#3b9a0d;
}
.language2 a:hover { color: #000; 
}

.language2 li.clear { 
display: none;
height:0px;}




/***********************************************/
/*　第2階層　言語TOP　                         */
/***********************************************/

.secondly-top {
	margin:0px 6px 100px 20px;
	padding:0;
}

.secondly-top h1{font-size:200%;
    line-height: 120%;
	color:#333;
	margin: 50px 0 36px 0;
	text-align:center;
	font-weight:normal;
	font-family: Didot,Garamond,serif;
}

.secondly-top h2.beginners{font-size:130%;
    line-height: 130%;
	color:#333;
	margin: 56px 0 40px 0;
	border-style: solid;
  border-width: 0;
  border-left-width: .8em;
  border-image: linear-gradient(#71dfe0, #fac25b, #f88f07) 1;
  padding-left: 1.1em;
}
.secondly-top h2.intermediate{font-size:130%;
    line-height: 130%;
	color:#333;
	margin: 56px 0 40px 0;
	border-style: solid;
  border-width: 0;
  border-left-width: .8em;
  border-image: linear-gradient(#78be39, #f69fda, #f2387e) 1;
  padding-left: 1.1em;
}
.secondly-top h2.advanced{font-size:130%;
    line-height: 130%;
	color:#333;
	margin: 56px 0 40px 0;
	border-style: solid;
  border-width: 0;
  border-left-width: .8em;
  border-image: linear-gradient(#3287f0, #b54fdd, #90280c) 1;
  padding-left: 1.1em;
}

.secondly-top h3{font-size:135%;
	line-height: 150%;
	color:#333;
	font-weight: normal;
	margin: 24px 0 18px 0;
}

.secondly-top p{font-size: 104%;
line-height: 186%;
}	
.secondly-top p.link{font-size: 104%;
line-height: 168%;
color:#666;
}

.secondly-top a{color: #3b9a0d; 
text-decoration: none; 
}

.secondly-top a:hover {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
  transition : .3s;
}

.secondly-top img{
	width: calc(100% - 20px);
	background-color:#FFF;
	margin:0;
	padding:5px;
	box-shadow: 0px 3px 1px -1px rgba(0,0,0,0.05);
}

.secondly-top div.hr {
  height: 1px;
  background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#999), to(transparent));
  background-image: linear-gradient(to right, transparent, #ccc, transparent);
  margin:30px 0;
}




/***********************************************/
/*　第2階層　コンテンツページ                  */
/***********************************************/

.secondly-content {
	margin:0px 6px 100px 20px;
	padding:0;
}

.secondly-content h1{font-size:200%;
    line-height: 120%;
	color:#333;
	margin: 50px 0 36px 0;
	text-align:center;
	font-weight:normal;
	font-family: Didot,Garamond,serif;
}

.secondly-content h2{font-size:130%;
    line-height: 130%;
	color:#333;
	margin: 56px 0 40px 0;
}


.secondly-content h3.merits{font-size:135%;
	line-height: 150%;
	font-style:italic;
	color:#f98146;
	margin: 24px 0 18px 0;
}
.secondly-content ol.merits {
	margin:-10px 0 -10px .3em;
}
.secondly-content li.merits {
	margin: 0px 0 0px 1em;
  padding: 0 0 0 1.5em;
  }
.merits li::marker {
	font-size:180%;
	line-height: .6em;
	font-style:italic;
  font-weight: bold;
  color: #f98146;
}


.secondly-content h3.demerits{font-size:135%;
	line-height: 150%;
	font-style:italic;
	color:#888;
	margin: 24px 0 18px 0;
}
.secondly-content ol.demerits {
	margin:-10px 0 -10px .3em;
}
.secondly-content li.demerits {
	margin: 0px 0 0px 1em;
  padding: 0 0 0 1.5em;
  }
.demerits li::marker {
	font-size:180%;
	line-height: .6em;
	font-style:italic;
  font-weight: bold;
  color: #888;
}


.secondly-content ol.manners {
	margin:36px 0 0px .6em;
}
.secondly-content li.manners {
	margin: 0px 0 0px 1em;
  padding: 0 0 0 1.5em;
  }
.manners li::marker {
	font-size:210%;
	line-height: .6em;
	font-style:italic;
  font-weight: bold;
  color: #fa5958;
}



.secondly-content h3.column{font-size:135%;
	line-height: 120%;
	color:#333;
	font-weight:normal;
	margin: 60px 0 16px 0px;
}
.secondly-content h3.column-s{font-size:135%;
	line-height: 120%;
	color:#333;
	font-weight:normal;
	margin: 32px 0 16px 0px;
}

.secondly-content h4.column{font-size:108%;
	line-height: 125%;
	color:#517b93;
	margin: 32px 0 14px 0px;
}
.secondly-content h4.column-pink{font-size:108%;
	line-height: 125%;
	color:#f586c0;
	margin: 32px 0 14px 0px;
}

.secondly-content ol.column {
	margin:0;
}
.secondly-content li.column {
	margin:0;
  }
.column li::marker {
	font-size:120%;
	line-height: .6em;
	font-style:italic;
  color: #517b93;
}

.secondly-content p.column{font-size: 104%;
line-height: 168%;
color:#666;
margin: 0px 0 8px 0px;
}
.secondly-content p.column-pink{font-size: 104%;
line-height: 168%;
color:#666;
margin: 0px 0 38px 28px;
}

.secondly-content span.merits{
	color:#f98146;
	font-size: 110%;
	font-weight:bold;
	font-style:italic;
	margin-right:10px;
}
.secondly-content span.demerits{
	color:#888;
	font-size: 110%;
	font-weight:bold;
	font-style:italic;
	margin-right:10px;
}

.secondly-content span.bold{
	font-size:180%;
	font-weight:bold;
	margin:0 3px;
}


.secondly-content p{font-size: 104%;
line-height: 186%;
margin:16px 0px 0 0;
}	
.secondly-content p.margin{font-size: 104%;
line-height: 186%;
margin:16px 0px 18px 0;
}
.secondly-content p.caption{font-size: 92%;
line-height: 136%;
color:#666;
font-style:italic;
text-align:right;
margin:2px 8px 0 0;
}	

.secondly-content p.language{font-size: 92%;
line-height: 136%;
text-align:center;
margin:20px 0px 0 0;
}
.language span {
   display: inline-block;
}


.secondly-content p.btn{font-size: 94%;
color: #fff;
text-align: center; 
background-color: #357ac8; 
padding: 16px 30px; 
margin: 60px 15% 130px 15%; 
border-radius: 5px;"
}

.secondly-content p.btn-pink{font-size: 94%;
color: #f3397f;
text-align: center; 
font-weight:bold;
background-color: #fff; 
padding: 20px 40px; 
margin: 32px 8% 28px 8%;
border: 2px solid #f586c0; 
border-radius: 60px;"
}
.secondly-content p.btn-marine{font-size: 94%;
color: #538df1;
text-align: center; 
font-weight:bold;
background-color: #fff; 
padding: 20px 40px; 
margin: 0px 8% 80px 8%; 
border: 2px solid #a2bdeb; 
border-radius: 40px;"
}



.secondly-content span.next-content{font-size: 140%;
font-weight:bold;
line-height: 186%;
padding:0px 0 6px 0px;
border-bottom:#3b9a0d 3px dotted;
margin:0px 8px 0px 0px;
}
.arrow_right {
  position: relative;
  padding-left: 0px;
}
.arrow_right::after { /* くの字の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 13px;    /* くの字を山なりに見た時、左側の長さ */
  height: 13px;   /* くの字を山なりに見た時、右側の長さ */
  border-top: 5px solid #f98146;     /* くの字を山なりに見た時、左側の太さと色 */
  border-right: 5px solid #f98146;   /* くの字を山なりに見た時、右側の太さと色 */
  transform: rotate(45deg);    /* くの字の向き */
}
.right{ margin:0 auto;
padding:0 7% 25px 0;
text-align:right;
}

.secondly-content p.btn-onsen{
	font-size: 100%; 
	line-height: 1.4em;
	text-align: center; 
	display: inline-block; 
	background-color: #ffffff; 
	padding: 5px 16px; 
	margin: 2px;
	border: solid 1px #7bb261;  
	border-radius: 25px;
}


.secondly-content a{color: #3b9a0d; 
text-decoration: none; 
}

.secondly-content a:hover {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
  transition : .3s;
}

.secondly-content img{
	width:100%;
	background-color:#FFF;
	margin:0 0 0px -13px;
	padding:5px;
	box-shadow: 0px 3px 1px -1px rgba(0,0,0,0.05);
}

.secondly-content div.hr {
  height: 1px;
  background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#999), to(transparent));
  background-image: linear-gradient(to right, transparent, #ccc, transparent);
  margin:30px 0;
  clear:left;
}


.flex{
}
.flex div{
}
.left{

}
.right{ text-align:left;
}



/***********************************************/
/*             page top                    　  */
/***********************************************/

.pagetop {
    position: relative;
	display: flex;
    justify-content: center;
	margin:0 auto;
	padding-bottom:0px;
}

.pagetop a {
  position:absolute;
  display: block;
  content: url(/images/icon_totop.png);
  transform: scale(0.5);
  bottom:-24px;
}

.pagetop a:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "alpha(opacity=100)";
}



/***********************************************/
/*             footer           　　　　       */
/***********************************************/

.footer{background-image: url(/images/bg_footer.png);
}

.footer p{ font-size:70%; 
text-align:center; 
color:#888; 
margin:0; 
padding:50px 0 50px 0;
font-family: Verdana, Helvetica Neue, sans-serif;
}