/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

 
 
 html, body {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background-position: center center;
    background-image: url(../Logo/blueBG.JPG);
    background-size: cover;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    /* overflow: scroll; */
 }
  

.Top-board  {
         position: relative; 
            margin: 0 auto;
            text-align: center;
           
    }
.Top-board img{
            height:360px;
            width:800px;
           
           
}

.blue-back {
    margin:0 auto;
      max-width: 100%;
     max-height: 100%;

        background-size:cover;
        padding: 20px 0 0 0;
         
    }   
    .l-main {
       
        width: 980px;
        height: 3900px;
        margin:0 auto;
        vertical-align: baseline;
        position: relative;
        background: #f9f5f5;
        /* overflow: scroll; */
        /* overflow: hidden; */ /*hiddenにするとページジャンプでレイアウトが崩れる*/
    }

#Top-category {
    background: #f9f5f5;
    padding: 4px 0 0px 0;
    margin-top:2px;
    text-align: center;
    width: 100%;
    margin: 0;
    height: 50px;
    box-shadow: inset 0px 0px 0px 0px rgba(119, 97, 114, 0.122);
    }
#Top-category ul {
    padding: 0;
    margin: 0;
    display: inline-block;   
   }
#Top-category ul li{
    float: left;
    padding: 0 6px;
    text-align: center;
    letter-spacing: 0.1px;
    position: relative;
    line-height: 110%;
    display: table;
    height: 35px;
    margin: 5.5px 8px;
    }
 #Top-category ul li span{
     font-size: 20px;
     font-weight: bold;
    display: table-cell;
    vertical-align: middle;
    }
    #Top-category ul li:before{
    position:absolute;
    top:10px;
    right:-6px;
    bottom:10px;
    content:"";
    display:block;
    border-right:1px solid rgb(153, 68, 68);
    }
    #Top-category ul a:last-child li:before{
    border-right:none;
    }
    #Top-category ul a{
    color: #666666;
    text-decoration:none;
    font-size: 13px;
    }
    #Top-category ul a:hover{
    color: #fff;
    opacity: 1;
    }
    #Top-category ul li:hover{
    background-color:#e90b89;
    border-radius: 4px;
    opacity: 0.6;
    }
   
    #bx-wrapper {     
     
        position: relative;
        margin-bottom: 0px;
        padding: 0;        
    }
    div.bx-wrapper {   /*スライド画像のスライダーの下まで*/
        margin-bottom: 30px;
        border-radius: 5px;
        margin: 0 auto;
        border-color:#42bff5;
     
    } 
    div.bx-wrapper .bx-pager.bx-default-pager { /*画像ボタンの位置*/
        text-align: center;
        font-size: .90em;
        font-family: Arial;
        font-weight: bold;
        color: rgb(62, 50, 75);
        padding-bottom:50px;
     }
    
     div.bx-wrapper .bx-pager.bx-default-pager a {
        background: rgb(243, 213, 236);
        text-indent: 2em;
        display: block;
        width: 10px;
        height: 10px;
        margin: 5px;
        outline: 10;
        border-radius: 2px;
      
    }
      div.bx-wrapper .bx-pager.bx-default-pager a:hover,
      div.bx-wrapper .bx-pager.bx-default-pager a.active,
      div.bx-wrapper .bx-pager.bx-default-pager a:focus {
          background: rgb(214, 7, 169);
    }
    .slider {
        margin-bottom: 0px;
        padding:0px;   /*スライド画像チラつき防止*/
        padding-bottom: 10px;
    }
    .main-title {
        position: relative;
        display: inline-block;
       padding: 5px 20px 5px 30px;
       line-height: 2;
        top:60px;
        left: 250px;
        color: #FFF;
        
        background: #e960ad;/*色*/
        opacity: 0.8;
        border-radius: 3px;/*角の丸み*/
        box-shadow: inset 0 2px 10px rgba(70, 42, 61, 0.2), inset 2 -10px 4 rgba(76, 10, 78, 0.29);
       
    }
    .main-title:active {
       /*押したとき*/
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.30); 
    }
    .main-title h1 {
        margin:0 auto;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 40px;
        font-weight: bold;
        display: inline-block;
        line-height: 70px;
    }
    .icon {
         max-width: 100%;
         max-height:100% ;
         object-fit: contain;
       position: relative;
       display: inline-block;
       top: 50px;
       left: -400px;
       margin: 0 auto;
       vertical-align: middle;
       
    }
   
    #taptowa {
        position: relative;
        margin:0 auto;
        line-height: 68px;
        text-align: center;
        width: 900px;
        height: 600px;
        top:100px;
        /* left:0px; */
        font-size: 36px;
        font-family: 'Times New Roman', Times, serif,sans-serif;
        font-weight: bold;
    }
    .towa1 {
        position: relative;
        margin: o auto;
        text-align: center;
        color: rgb(134, 7, 7);
    }
    .towa2 {
        position: relative;
        margin: o auto;
        text-align: center;
        color: rgb(23, 23, 145);
    }
    .towa3 {
        color: #17793e;
    }
    .towa4 {
        color: rgb(252, 131, 2);
    }
    .sub-title {
        position: relative; /*位置固定*/
        top:190px;
       left: 310px;
       vertical-align: middle;
       
        display: inline-block;
        padding: 7px 30px;
        color: #f8f3f6;
        border-radius: 3%;
        /* border: solid 1px #3b2639; */
        background: rgb(236, 68, 149);
    
      }
      .sub-title h2 {
          font-size: 30px;
          font-family: Arial, Helvetica, sans-serif;
          font-weight: bold;
          display: inline;
          line-height: 50px;
      }
    #Top-circle {     
        position: relative;
        text-align: center;
        margin: 0 auto;
        top:200px; 
       
         width: 950px;
        height: 600px; 
        
        /* max-width: 100%; */
       
        /* outline: 5px dotted rgb(226, 46, 118); */
    } 
    
    #circle-1 {
        /* position: relative; */
        position: absolute;
        /* vertical-align: middle; */
        /* margin: 100px 0px 10px 60px; */
        top: 60px;
        left: 80px;
        width: 200px;
        height: 200px;
        
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        -o-border-radius: 50%;
        -ms-border-radius: 50%;
        font-size: 30px;
        font-family: sans-serif,Verdana, Geneva, Tahoma;
        color: rgb(131, 111, 111);
        background-color: rgb(245, 191, 203);
        text-align: center;
        box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.29);
        border-bottom: solid 7px #bd6565;
        transition: .2s;
      }
      #circle-1:active {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
        border-bottom: none;
      }
      #circle-1 p {
          position: relative;
          margin:0;
          top:50%; /*文字を中央に移動*/
          transform: translateY(-50%);
         
      }
      #circle-1 a {
          text-decoration: none;
          color: rgb(95, 88, 88);
          font-weight: 700;
      }
      #circle-1:hover {
        
        background-color: rgb(249, 242, 247);
       
      }
   
      
    #circle-2 {
        /* position: relative; */
        position: absolute;
        top: 60px;
        left: 340px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        -o-border-radius: 50%;
        -ms-border-radius: 50%;
        font-size: 30px;
        font-family: sans-serif,Verdana, Geneva, Tahoma;
        color: rgb(131, 111, 111);
        background-color: rgb(191, 224, 245);
        text-align: center;
        box-shadow: 0px 10px 10px rgba(72, 80, 97, 0.29);
        border-bottom: solid 7px #4f71a3;
        transition: .2s;
      }
      #circle-2:active {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
        box-shadow: 0 0 3px rgba(11, 23, 49, 0.15);
        border-bottom: none;
      }
      #circle-2 p {
          position: relative;
          margin:0;
          top:50%; /*文字を中央に移動*/
          transform: translateY(-50%);
         
      }
      #circle-2 a {
          text-decoration: none;
          color: rgb(95, 88, 88);
          font-weight: 700;
      }
      #circle-2:hover {
        
        background-color: rgb(240, 244, 250);
       
      }
      
    #circle-3 {
        /* position: relative; */
        position: absolute;
        top: 60px;
        left: 600px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        -o-border-radius: 50%;
        -ms-border-radius: 50%;
        font-size: 25px;
        font-family: sans-serif,Verdana, Geneva, Tahoma;
        color: rgb(107, 83, 5);
        background-color: rgb(252, 249, 176);
        text-align: center;
        box-shadow: 0px 10px 10px rgba(3, 59, 42, 0.29);
        border-bottom: solid 7px #f8e91a;
        transition: .2s;
      }
      #circle-3:active {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
        border-bottom: none;
      }
      #circle-3 p {
          position: relative;
          margin:0;
          top:52%; /*文字を中央に移動*/
          transform: translateY(-50%);
         
      }
      #circle-3 a {
          text-decoration: none;
          color: rgb(95, 88, 88);
          font-weight: 700;
      }
      #circle-3:hover {
        
        background-color: rgb(250, 249, 240);
       
      }
    #circle-4 {
        /* position: relative; */
        position: absolute;
        top: 320px;
        left: 150px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        -o-border-radius: 50%;
        -ms-border-radius: 50%;
        font-size: 30px;
        font-family: sans-serif,Verdana, Geneva, Tahoma;
        color: rgb(232, 253, 228);
        background-color: rgb(217, 253, 220);
        text-align: center;
        box-shadow: 0px 10px 10px rgba(66, 66, 49, 0.29);
        border-bottom: solid 7px #0580328b;
        transition: .2s;
      }
      #circle-4:active {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
        border-bottom: none;
      }
      #circle-4 p {
          position: relative;
          margin:0;
          top:50%; /*文字を中央に移動*/
          transform: translateY(-50%);
         
      }
      #circle-4 a {
          text-decoration: none;
          color: rgb(95, 88, 88);
          font-weight: 700;
      }
      #circle-4:hover {
        
        background-color: rgb(250, 249, 240);
       
      }
    #circle-5 {
        /* position: relative; */
        position: absolute;
        top: 320px;
        left: 410px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        -o-border-radius: 50%;
        -ms-border-radius: 50%;
        font-size: 25px;
        font-family: sans-serif,Verdana, Geneva, Tahoma;
        color: rgb(206, 184, 243);
        background-color: rgb(225, 202, 250);
        text-align: center;
        box-shadow: 0px 10px 10px rgba(89, 74, 96, 0.311);
        border-bottom: solid 7px #785e91;
        transition: .2s;
      }
      #circle-5:active {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
        border-bottom: none;
      }
      #circle-5 p {
          position: relative;
          margin:0;
          top:55%; /*文字を中央に移動*/
          transform: translateY(-50%);
         
      }
      #circle-5 a {
          text-decoration: none;
          color: rgb(95, 88, 88);
          font-weight: 700;
      }
      #circle-5:hover {
        
        background-color: rgb(245, 240, 250);
       
      }
    #circle-6 {
        /* position: relative; */
        position: absolute;
        top: 320px;
        left: 670px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        -o-border-radius: 50%;
        -ms-border-radius: 50%;
        font-size: 30px;
        font-family: sans-serif,Verdana, Geneva, Tahoma;
        color: rgb(233, 203, 179);
        background-color: rgb(255, 219, 177);
        text-align: center;
        box-shadow: 0px 10px 10px rgba(241, 152, 19, 0.29);
        border-bottom: solid 7px #be9e62;
        transition: .2s;
      }
      #circle-6:active {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
        border-bottom: none;
      }
      #circle-6 p {
          position: relative;
          margin:0;
          top:55%; /*文字を中央に移動*/
          transform: translateY(-50%);
         
      }
      #circle-6 a {
          text-decoration: none;
          color: rgb(95, 88, 88);
          font-weight: 700;
      }
      #circle-6:hover {
        
        background-color: rgb(252, 240, 229);
       
      }
      #contents {
        position: relative;
        margin: 0 auto;
        top: -600px;
        left: 600px;
      }
      #contents p {

          font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
          font-weight: bold;
          font-size: 20px;
      }
      #box1 {
        /* padding: 0.5em 1em; */
        
        position: relative;
        top:200px;
        text-align: center;
        margin:0 auto;
        
        width: 950px;
        height: 1680px;
        font-weight: bold;
        color: #6091d3;/*文字色*/
        background: #f9f5f5;
        /* border: solid 3px #6091d3;線 */
        /* border-radius: 12px;角の丸み */
    }
    #box1 h1 {
        position: relative;
        top: 60px;
        text-align:center;
        margin: auto;
        padding:auto;
        width: 280px;
        height: 60px;
        font-size: 35px;
        border-radius: 23px;
        background: rgb(222, 222, 234);
        box-shadow: #6c2c674b  7px 10px 14px;
        
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
         font-weight: bold;
         color: rgb(229, 72, 93);
        
    }
    #box1 h2 {
        position: relative;
        top: 80px;
        margin-top: 60px;
        margin-bottom: 80px;
        font-size: 30px;
        font-family: 'Times New Roman', Times, serif,sans-serif;
         font-weight: bold;
         color: rgb(246, 8, 40);
        
    }

    #box1 h3 {
        text-align: left;
        position: relative;
        top: 55px;
        margin:auto;
        width: 800px;
        /* left: 90px;    */
        font-size: 25px;
        font-weight: bold;
        color: rgb(38, 56, 26);
    }
    #box1 h4 {
         text-align: left;
          margin:auto;
         position: relative;
         top: 50px;
         width: 700px;
         /* height: 200px; */
     
        font-size: 22px;
        color: rgb(26, 34, 56);
    }

  

    #box1 p {
        
       margin-top:100px;
        margin-right: 0%; 
        padding: 0;
        color: rgb(226, 57, 195);
        font-size: 30px;
        letter-spacing: 3px;
        
        /* text-decoration:underline; */
        
    }
    #box1 a {
        position: relative;
        top:100px;
        /* left: -380px; */
    }

    .staff  {
        position: relative;
        /* width: 980px; */
        /* top: 30px; */
        /* margin-bottom: 50px; */
        font-size: 22px; 
    }
    .staff a {
        position: relative;
       width: 200px;
        left: -90px;
        text-decoration:none;
        color:  rgb(26, 34, 56);
      }  

      #facebook  {
          position: relative;
          width:950px;
          height: 200px;
          margin: 0 auto;
          top:130px;
         /* text-align: center; */
        
      }
      #facebook p {
        position: relative;
        width:950px;
        height: 50px;
        margin: 0 auto;
        top:80px;
      
      }

    
    footer {
        margin:0 auto;
        padding: 0px;
        position: relative;
        top:-70px;
        bottom:0px;
        text-align: center;
        width: 100%;
        height: 280px;
        
        background-image: url(../Logo/blueBG.JPG);
       

    }

    footer p {
        font-size: 20px;
        color: floralwhite;
        letter-spacing: 2px;
            
    }
    
     #PageTopBtn {
        /* position: fixed; ボタンの配置場所を固定 */
        bottom: -10px; /*下からのボタンの配置場所を指定*/
        right: 10px; /*右からのボタンの配置場所を指定*/
    }
    #PageTopBtn a {
        display: block; /*配置の調整*/
        font-size: 20px;
        text-decoration: none; /*文字の下線を消す*/
        color: rgb(43, 97, 145); /*文字の色*/
        background:rgb(193, 219, 236); /*ボタンの背景色*/
        text-align: center; /*文字を中央に配置*/
        border-radius: 0%; /*ボタンの角を少し丸くする*/
        outline: none; /*クリックしたときの黒い枠を消す*/
    }
    #PageTopBtn a:hover {
        text-decoration: none; 
        background: #f9f5f5; /*マウスオーバー時の背景色*/
    }
    .mail {
        margin: 50px 0 30px 0;  
    }
    .mail a{
        color: rgb(20, 19, 19);
        /* text-decoration: none; */
        /* font-weight: bold; */
       
    }
    .sns {
       margin-top: 0px; 
    }
    .share-h {
        color: black;
        font-size: 20px;
        margin:20px 0 0 0;
      
    }
           
    .shareList {
        list-style:none;
        display: flex; 
        width:350px;
        height: 45px;
     
       
        flex-wrap:nowrap;/* width:100%; */
        
         margin:0 auto;
        padding:0    
    }
    .shareList__item {
        height:28px;
        line-height:28px;
        margin:15px 0 0 5px;
        text-align:center;
    }
    .shareList__link {
        display:block;
        padding:0 10px;
        color:#ffffff;
        text-decoration: none;
        border-radius: 5px;
    }
    .shareList__link::before{
        font-size:14px;
        transition: ease-in-out .2s;
        border-radius: 5px;
    }
    .shareList__link::after{
        content:attr(title);
        font-size:12px;
        vertical-align: top;
        margin-left:5px;
        margin-right:5px;
    }
    .shareList__link:hover{opacity: 0.75;}
     
    .shareList__link.icon-twitter{background:#55acee;}
    .shareList__link.icon-facebook{background:#3B5998;}
    .shareList__link.icon-line{background:#1dcd00;}
     
   .copy {
       text-align: left;
       margin-top: 10px;
       color: #f1e0e0;
   }