@charset "UTF-8";

/* HTML5 display-role reset for older browsers */
article,aside,canvas,details,figcaption,figure,
header,footer,menu,nav,section,summary {
display: block;
}

/* 要素リセット */
html, body, div, span, h1, h2, h3, h4, h5, h6,
a, img, small, strong, b, 
ol, ul, li,
caption, article, aside, canvas,
footer, header, menu, nav,
ruby, section {
   	margin: 0;
	padding: 0;
	border: 0;
        font-size: 100%;
	vertical-align: middle;
}
ul{list-style-type: none;}
a  {text-decoration: none;}
dl, dt, dd{font-size:1rem;}
img {max-width:100%;height:auto;}            /*フルードイメージによる画像の伸縮*/

/*ボックスサイズの計算方法指定*/
*{box-sizing:border-box;}
/* 要素リセット end */

/*@group html */
html{ font-family: 'メイリオ' ,Meiryo, 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'ＭＳ Ｐゴシック' , sans-serif ;
      line-height:1.5;font-size:16px;}
.heading-lv2{font-size:16px;color : #ffffff;background-color : gray;text-align : center;clear:both;}
.heading-lv3-topPage{font-size:26px;font-weight:bolder;color:white;text-align : left;background-color : navy;padding-left:26px;margin-bottom:36px}
.heading-lv3{font-size:22px;background: repeating-linear-gradient(45deg, #dcdcdc, #dcdcdc 2px, transparent 2px, transparent 6px),
             repeating-linear-gradient(-45deg, #f5f5f5, #f5f5f5 2px, transparent 2px, transparent 4px);font-family:'AR P丸ゴシック体M';margin-top:16px;}
.heading-lv4{font-size:18px;font-weight:bolder;margin-top:18px;font-family:'AR P丸ゴシック体M';}
.heading-lv5{padding:0 26px;text-align : left;text-shadow: 0 0 5px white;font-size:26px;border-radius: 10px 10px 0 0/10px 10px 0 0;
             background: repeating-linear-gradient(45deg, #c0c0c0, #c0c0c0 3px,#d3d3d3 3px, #d3d3d3 7px);font-family:'AR P丸ゴシック体M';}
.sub-title{text-align:center;font-size:18px;font-weight : normal;margin-top:20px;margin-bottom:36px}
/*end*/

/*@group hedding1 */
#hContainer {margin:0 auto;
        text-align:center;
        padding-top:12px;
       }
#hExtra {margin-top:12px;
           }
#hExtra ul{display:-webkit-inline-flex;
           display:inline-flex;
            font-size:12px;
           }
#hExtra li{padding:0 16px;
           }
.tGazo {height:60px}
/*.hGazo {max-width:110%;text-align:center}*/
/*end*/

/*@group hedding2nav */
/*グローバルナビゲーション*/
.p-nav ul{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top:12px;
}
.p-nav ul li{
justify-content: center;
display:-webkit-box:center;
display:-ms-flexbox:center;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border:solid 1px #bfbfbf;
font-weight : bold;
/*min-height:50px;/* 最低の高さ */
height:50px;/* ie対策 */
cursor:pointer;
}
.p-nav li a:link,
.p-nav li a:visited,
.p-nav li a:hover,
.p-nav li a:active{color:#fff;}
.p-nav li:hover{background-image:linear-gradient(
                rgba(255,255,255,0.2),
                rgba(255,255,255,0.2));}
.p-nav li:nth-child(1){background-color : purple;}
.p-nav li:nth-child(2){background-color : navy;}
.p-nav li:nth-child(3){background-color : teal;}
.p-nav li:nth-child(4){background-color : olive}
.p-nav li:nth-child(5){background-color : navy}
.p-nav li:nth-child(6){background-color : teal}
.p-nav li:nth-child(7){background-color : olive}
.p-nav li:nth-child(8){background-color : purple}
/*グローバルナビゲーションend*/

/* @group contents main---------------------------------------------*/
.main{width:98%;margin:0 auto;}
/* トップページ専用スタイル-----*/
/*:root {--created-color:#0b44e3;
       --done-color:#2661b2;}*/
.flexcontainer{display:flex;flex-direction:column;text-align:left}
.cTmain ul{overflow:hidden;margin-bottom:20px}
.cTmain ul a{text-decoration: underline;}
.row{display:flex;flex-direction:column;text-align:left}
.col-Tmain ul,
.col-kakoRight ul{overflow:hidden;margin-bottom:20px}
.col-Tmain ul li,
.col-kakoRight ul li{float:left;}
.col-Tmain ul a,
.col-kakoRight ul a{text-decoration: underline;}
.col-kakoLeft{overflow:hidden;background:  radial-gradient(circle at top left, #dcdcdc, transparent 200px);}
.btn-new {background-color:red;padding:10px;margin:0px 5px 0px 20px;color:white;font-size:18px;border-radius:50% 50% 50% 50%}
.btn-created {background-color:#0b44e3;padding:10px;color:white;font-size:18px;border-radius:2px}
.btn-done  {background-color:#2661b2;padding:10px;color:white;font-size:18px;border-radius:2px}
.btn-done-osirase {background-color:#2661b2;padding:0px 10px;color:white;font-size:18px;border-radius:2px}
.btn-caution {background-color:red;padding:10px;color:white;font-size:18px;border-radius:2px}
.flex1 {display : -ms-flexbox;display:-webkit-box;display:flex;
        -webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	-ms-flex-flow:row wrap;flex-flow:row wrap;
        -webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;
        -ms-flex-line-pack: start;align-content:flex-start;margin:16px 0;}
/*.flex1-1{-ms-flex-item-align: start;align-self:flex-start;}*/
.flex1-2{-webkit-box-flex:3;
	-ms-flex-positive:3;
	flex-grow:3;}
#tSub1 li{text-align:center;
    margin: 10px;
    padding:4px;
    border-radius: 6px;
    box-shadow:0px 3px 10px 2px rgba(0,0,0,0.3)}
#sub-japanese{background-color: #edbeed;}
#sub-exchange{background-color: #edcaa6;}
#sub-area{background-color: #a6eda6;}
#sub-language{background-color: #bed5ed;}
.saie-report{padding-top:20px;background-image:url(index-pic/worldmap1.png);background-repeat: no-repeat;background-size: contain;background-position:top right;background-color:#f8f8f8;}
.saie-booklet{padding-top:10px;background-image:url(index-pic/thirty.png);background-repeat: no-repeat;background-size: 25%;background-position:bottom right;background-color:#f8f8f8;}
.mascot{padding-top:20px;background-image:url(index-pic/mascot1.png);background-repeat: no-repeat;background-size: 34%;background-position:bottom right;background-color:#f8f8f8;}
.saie-report a{display:block;margin-left:14px;padding-left:14px;padding-top:6px;padding-bottom:6px;}
.saie-booklet a{display:block;margin-left:10px;padding-left:10px;padding-top:4px;padding-bottom:4px;}
/* トップページ専用スタイル end-*/

/* ユーティリティclass*/
.clearfix::after {content: "";display: block;clear: both;} 
.small{font-size:90%}
.flex-btn{display:-webkit-flex;display:flex;}
.flex-btn-r{justify-content: flex-end;}
.yoko{display:inline-block;}
.ta-r{text-align:right; !important}
.m5{margin:5px; !important}
.p-l20{padding-left:20px;}
/* ユーティリティclass　end*/

/* ソーシャルボタン　スタイル*/
.sc{text-align:right;padding-right:14px;}
.sc-facebook{margin-bottom:7px; margin-right:2px;background:#325096;color:white;font-size:13px;padding:0 4px;}
.sc-line{padding-left:4px;padding-bottom:9px;}

/* page　専用スタイル-----*/
.service  ul,
.exchange ul {padding-left:24px;list-style-type: disc}
.col-kakoLeft ul,
.kawaraban ul {padding-left:24px;list-style-type: disc;color:olive;margin-top:16px;}
.col-kakoLeft li,
.kawaraban li {margin-bottom:12px;}

.list-disc {display:list-item;list-style-type:disc;margin-left:22px;}

.t-deco-u{text-decoration: underline;}
.t-deco-n{text-decoration: none;}
.triangle3{
  border-top: 4px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 13px solid #c0c0c0;
  border-left: 7px solid transparent;
  width:0px;height:0px;margin-right:2px;
}

.arrow{
  position:relative;
display:inline-block;
padding:0 0 0 16px;
color: #000;
}
.arrow::before,
.arrow::after{
 position:absolute;
top:0;
bottom:0;
left:0;
margin:auto;
content:"";
}
.arrow-a::before{
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    border: 1px solid gray;
    -webkit-border-radius: 25%;
    border-radius: 25%;
}
.arrow-a::after{
    left: 5px;
    box-sizing: border-box;
    width: 3px;
    height: 3px;
    border: 3px solid transparent;
    border-left: 3px solid gray;
}
.arrow-b::before{
    left: 3px;
    width: 4px;
    height: 4px;
    border-top: 2px solid gray;
    border-right: 2px solid gray;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.kaiin  dl,
.kaiin  dt,
.kaiin  dd,
.gogaku dt{font-size:18px}
.center{text-align: center}
.yomi{font-size:14px;}
.kaki{font-size:20px;
      font-weight:bold;
      margin-bottom:24px;}
.t-gray{color :#7a7a7a}
.photo-order{overflow:hidden;
        text-align:center;
        margin-bottom:20px;
        list-style-type: none !important;}
.photo-order li{float:none;margin:20px;}
.pdf:after{
  content: "pdf";
  font-size:10px;
  border:solid 1px red;
  padding:2px;
}
/* page　専用スタイルend-----*/

/* 日本語教室　専用スタイル-----*/
.japanese-table-wrapper,
.japanese-table{overflow:hidden;
                        text-align:center;
                        margin:0 auto;width:260px}
.japanese-table,
.japanese-table tr,
.japanese-table th,
.japanese-table td{display:block}

.japanese-table th,
.japanese-table td{padding:1rem;
                   border-left:1px solid #dadada;
                   border-right:1px solid #dadada;}
.japanese-td-bottom {border-bottom:1px solid gray;
                     margin-bottom:20px}

.japanese-table th{font-weight:bold;
                   background-color:#fef4f4;}
#fixed {
  position: fixed;height:70px;
  text-align:center;
  /*基準を画面の左下に*/
  bottom: 0;
  left: 0;
  /*以下装飾*/
  width: 100%;
  background-color:rgba(0,128,128,0.5);color:white;align-items: center;justify-content: center;font-size:15px;}
#fixed div{margin:5px;padding-top:10px;padding-bottom:10px;border-radius: 10px;background-color:gray;border:double 4px white;}
/* 日本語教室　専用スタイル end-*/

/*友好都市　専用スタイル*/
.ex-arrow {width:280px;height:150px;margin: 10px 15px;padding: 20px;border-radius: 3px;border-width: 1px;border-style: solid;border-color: #2f2f2f;position:relative;}
.ex-arrow:after{position:absolute;top:45%;left:90%;font-weight:bolder;content:">";opacity:0}
.ex-arrow:hover:after{opacity:1}
.modoru a:hover{text-decoration: underline;}

/*jQuery slick-customize*/
.slick-arrow{
  z-index: 1001;
}
.slick-prev,
.slick-next
{
  width: 30px; /* コントローラーの大きさと同じにする */
  height: 30px; /* コントローラーの大きさと同じにする */
}
.slick-prev:before,
.slick-next:before
{
  font-size: 30px; /* コントローラーの大きさ */
  line-height: 1.5;
    color: gray;
}
.slick-prev
{
    left: 15px; /* 前へ戻るコントローラーの位置を指定 */
}
.slick-next
{
    right: 15px; /* 次へ進むコントローラーの位置を指定 */
}
.slick-dots li
{
    width:10px;
}
.slick-dots li button
{
    width:10px;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px; /* ページャーの大きさ */
    line-height: 20px;
}
/*jQuery slick-customize end*/
/*友好都市　専用スタイル end-*/

/* @group contents main------------------------------------------end*/

/* @group footer*/
footer{clear:both;padding:24px 0;text-align:center;}
#fContainer a,a:link,a:hover,a:visited,a:active{
    color: inherit;text-decoration:none}
#fLi{background-color:#2661b2;
      color:#fff;
      text-indent:4em;
      text-align:right;
      border-bottom:1px solid #0f3266;}
#fLi1 li{padding-top:15px;padding-bottom:10px;
         border-top:1px solid #0f3266;
         border-bottom:1px solid #80b5ff}
#fTel{
    margin: 10px 15px;
    padding: 5px auto;
    background-color: #F8F8F8;
    border-width: 1px;
    border-style: solid;
    border-color: #2f2f2f;
    border-radius: 3px;}
footer p{
    font-size:10px;
}
.maru{width:80px;
    height:80px;
    border-width: 1px;
    border-color:#2f2f2f;
    border-radius:100%;
    font-weight: bold;
    text-align: center;
    margin: 1rem;}
.back-to-home{border-style: solid;font-size:1rem;padding-top:28px;}
.back-to-top {border-style:dotted;font-size:2rem;padding-top:14px;}
/*パネル**********************************/
.panel1{
  position:relative;
  background:#ffffcc;
  padding:16px 16px 16px 42px;
}
.panel1:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:0;
  border-style:solid;
  /*border-color:#fff #ffedab  #ffedab #fff;*/
  border-color:#fff #ffffcc #ffffcc #fff;
  border-width:16px 16px 16px 16px;
}


/*丸形ー吹き出し***********************/
.balloon1{
  position: relative;
  background:#0b44e3;
  padding: 16px;
  color:white;font-size:18px;
  text-align:center;
  border-radius: 50%;
}
.balloon1:after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 90px;
  bottom: -2px;
  border-style: solid;
  border-color: transparent transparent transparent #0b44e3;
  border-width: 8px 0 8px 24px;
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
}
.ribbon11-wrapper{
  position:relative;
  background:#cee4ae;line-height:1.8;
  padding:16px 2px 18px 22px;margin:8px;
}
.ribbon11-1{
  position:absolute;
  background:red;text-align:center;
  border-radius:6px 0 6px 6px;
  /*font-size:24px;*/
  right:40px;top:-6px;height:36px;width:70px;
  padding:0 8px;
  color:white;
  /*box-shadow:2px 0px 2px rgba(0,0,0,0.1);*/
}
/*.ribbon11-1:before{
  position:absolute;
  content:"";
  top:35px;
  right:0px;
  height:0px;
  width:0px;
  border-style:solid;
  /*border-color:red #cee4ae #cee4ae transparent;*/
  /*border-color:red transparent trannsparent transparent;*/
  /*border-width:12px 35px 0px 35px;
}*/
.ribbon11-1:after{
  position:absolute;
  content:"";
  top:-0px;
  right:-7.9px;
  height:0px;
  width:0px;
  border-style:solid;
  border-color:transparent transparent #cc0000 #cc0000;
  border-width:3px 4px 3px 4px;
}

/*line***********************/
.lbox {
  position: relative;
  border: solid 2px #06c755;
  border-radius: 10px;
  margin:14px 0 24px 0;}
.lbox .lbox-title {
    position: absolute;
    top: -13px;
    left: 10px;
    padding: 0 10px;  // paddingを左右にいれて消す線の長さを延ばす
    line-height:1;
    background-color:#fff;}
.line-mark{background:#06c755;border-radius: 20px 20px 30px 30px/10px 10px 50px 50px;color:white;font-weight:bolder;width:22px;}
.lbox-content {padding: 20px 4px;}

.map-size{margin-top:2%}
/* =======================================================
  レスポンシブル 727px以下
======================================================= */
@media screen and  (max-width: 727px){
     #hAdress {display: none;}
     .p-nav ul{margin-top:2px;}
     .p-nav ul li{width:25%;}
     .map-size{width:100%; height:450px;}
     .modoru{display: none;}
}
/* =======================================================
  レスポンシブル 728px以上
======================================================= */
@media screen and (min-width: 728px){
     .map-size{width:728px; height:450px;}
     #hContainer{overflow:hidden;
            width:728px;
           }
     .tGazo {height:128px}
     /*.hGazo {max-width:105%;text-align:center;}*/
     #hLogo{width:480px}
     #hExtra{width:248px}
     #hLogo,  #hExtra{float:left;}
    .p-nav ul li{width:12.5%;}
    .main{overflow:hidden;width:728px;}
     /*#tSub{overflow:hidden;
            width:728px;text-align:center}*/    
     #tSub1{overflow:hidden;margin:0;padding:0;list-style:none;
           text-align:center} 
     #tSub1 li{float:left;width:47%;
           }
     #fContainer{
            width:728px;
            margin:0 auto;
           }
     #fLi{display:none;}
     .photo-order li{float:left}
     .japanese-table{display:table;
                     border-collapse:collapse;}
     .japanese-table tr{display:table-row;}
     .japanese-table th,
     .japanese-table td  {display:table-cell;
                          border:1px solid #dadada;}
     .japanese-table-wrapper,
     .japanese-table{overflow:hidden;
                        margin:0 auto;width:728px}
     /* PCではLINEボタンを表示しない */
     /*.sc-line {display: none ;}*/
}
/* =======================================================
  レスポンシブル 1000px以上
======================================================= */
@media screen and (min-width: 1000px),print{
     #hContainer{overflow:hidden;
            width:1000px;
           }
     /*.hGazo {max-width:100%;text-align:center;}*/
     #hLogo{width:550px}
     #hExtra{width:430px}/*430/1000*/
     #hLogo,  #hExtra{float:left;}
     #main-wide.main{overflow:hidden;margin:0 auto;width:1000px;}
     .flexcontainer{flex-direction:row;text-align:left}
     .cTmain{overflow:hidden;margin:0 auto;width:728px;}
     .cTindex{overflow:hidden;margin-left:2px;width:270px;}
     .row{flex-direction:row;justify-content:space-between;}
     .col-Tmain{overflow:hidden;width:728px;}
     .col1{overflow:hidden;width:728px;}
     .col2{overflow:hidden;width:calc((270/1000)*100%);}
     .col-kakoLeft{overflow:hidden;width:calc((120/1000)*100%);}
     .col-kakoRight{overflow:hidden;width:calc((850/1000)*100%);}
     /*#tSub{width:1000px}*/
     #tSub1{overflow:hidden;margin:0;padding:0;list-style:none;
           } 
     #tSub1 li{float:left;width:23%;
           }
     #fContainer{
            width:1000px;
            margin:0 auto;
           }
     #fTel{display:none;}
}