@charset "utf-8";
/*-------------PCスマホの表示分け---------------*/
.mb-hidden{/* スマホでは表示しない */
}
.pc-hidden{/* pcでは表示しない */
display: none;
}
/*-------------基本スタイル（全体）---------------*/
html, body{
padding: 0;
margin: 0;
height: 100%;
}
html,body{
width: 100%;
min-width:980px;
}
body{
background-color: none;
background-image: none;
line-height: 1.8;
letter-spacing: 2px;
font-size: 16px;
-webkit-text-size-adjust: 100%!important;
font-family: "source-han-serif-japanese",serif;
font-weight:;
}
/*---------基本スタイル　リンク文字カラー-------------------*/
a{color: #0000cd;}
a:hover{color: #0000cd;}
a:visited{color: #0000cd;}
a img{border: none;}
a img:hover {
opacity: 0.6;
filter: alpha(opacity=60);
-moz-opacity:0.6;
}
/*-------------基本スタイル　リスト等---------------*/
p,div,li,img {
margin: 0;
padding: 0;
}
dt{
font-weight: normal;
margin: 0.5em 0;
}
dd{
margin: 0.5em 0 1.5em 1.5em;
}
ul{
margin: 0;
}
li{
margin: 0 0 0.5em 0;
}
/*-------------基本スタイル　その他---------------*/
img{
max-width: 100%;
}
/*----------各パーツの構造------------------*/
header{
}
section{
}
footer{
}
article{
}
/*----------共通設定レイアウト調整-----------------*/
.wrap{
}
.contents{
width: 960px;
padding: 0 30px 0 30px;
margin: 0 auto;
text-align: left;
border-left: 0px solid red;
border-right: 0px solid red;
}
.fl-right{
float: right;
margin-left: px;
}
.fl-left{
float: left;
margin-right: px;
}
.fl-text{
width: 480px;
overflow: hidden;
}
div.bgc-a{
background-color: #fffaf0;
padding: 2em;
margin: 30px 0;
}
/*----------共通設定　見出し-----------------*/
h1{
margin: 0;
padding: 0;
}
h1 img{
margin: 0;
}
.h2-text{
font-weight:normal;
text-align: center;
font-size: 54px;
letter-spacing: 2px;
color: #20b2aa;
margin: 100px 0 0 0;

}
.h3-text{
font-weight:normal;
text-align: center;
font-size: 36px;
letter-spacing: 2px;
color: ;
margin: 80px 0 20px 0 ;
}
h4{
color: #c71585;
clear: both;
}
.h4-text{
font-weight:normal;
text-align: center;
font-size: 30px;
letter-spacing: 2px;
color: ;
margin: 80px 0 40px 0 ;
}
h5{
font-weight:normal;
text-align: center;
font-size: 24px;
}

/*----------共通設定　テキスト-----------------*/
.main-text p{/* メインテキスト＝h2見出しのあとの文章など*/
text-align: center;
margin: 1em 0;
font-size: 20px;
line-height: 2;
letter-spacing:2px;
}
.gothic{/*ゴシック体*/
font-family: "source-han-sans-japanese",sans-serif;
font-weight: 200;
font-size: 18px;
line-height: 1.7;
letter-spacing: 2px;
padding-top: 0em;
margin-top: 0;
margin-bottom: 0.5em;
}
.itemized{/*箇条書きのみ*/
padding-left: 1.1em;
text-indent: -1.1em;
}
.fz-s{/* フォントサイズのみ */
font-size: 15px;
}


/*-----------ヘッダー-----------------*/
.header-wrap{
height: 80px;
border-bottom: 1px solid #d3d3d3;
padding-top: 10px;
}
.header-logo{
float: left;
margin: 0;
width: ;
padding: 0 0 0;
}
.header-logo img{
width: 350px;
}

/*------------ナビメニュー----------------*/
nav ul{
float: right;
margin: 20px 0 0 0;
padding: 0;
}
nav li{
float: left;
list-style: none;
margin: 0 0em 0 1.5em;
font-family: "source-han-sans-japanese",sans-serif;

}
nav img{
width: auto;
height: 18px;
margin: 0 0 0px 0;
padding: 0;
}
nav li a{
text-decoration: none;
color: #c81233;
letter-spacing: 1px;
font-size: 17px;
}
nav li a:visited{
color: #c81233;
}
nav li a:hover{
color: #c81233;
text-decoration: underline;
background-color: lightyellow;
}

/*----------冒頭------------------*/
img.img-title01{/*文字と画像見出し*/
width:900px ;
margin: 0px 0;
position: ;
z-index: 0;
}
div.introduction{/*　タイトルのリード文*/
margin: 0 0 100px 0;
padding: 0;
position: absolute;
top: 100px !important;
}
.introduction p{/*　タイトルのリード文*/
font-size: 21px;
margin: 0.7em  13px ;
color:#474747;
line-height: 2;
letter-spacing:2px;
z-index: 999;
}
.intro-img ul{/*　リード文の下のイメージ画像*/
padding: 0;
margin: 0;
}
.intro-img li{/*　リード文の下のイメージ画像*/
list-style: none;
display: block;
margin: 0px auto;
width: 900px;
}
ul.list-a{/*TOPICの画像*/
padding: 0;
margin: 50px;
}
.list-a li{/*TOPICの画像*/
list-style: none;
display: block;
margin: 10px auto;
width: 720px;
}
.list-a img{/*TOPICの画像*/
width: 100%;
border: 1px solid #dcdcdc;
}
/*------------記事（article）内----------------*/

.explanation{/*　画像と説明のあるパーツ全体　*/
width: 900px;
margin-left: auto;
margin-right: auto;
}
.explanation img{
width: 300px;
}
.explanation p{
}

/*------------画像サイズ----------------*/
.pic-middle{
width: 600px;
margin-left: auto;
margin-right: auto;
display: block;
margin-top: 50px;
margin-bottom:50px ;
}
.pic-large{
width: 95%;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
margin-bottom: 40px;
display: block;
}

/*------------記事----------------*/
.centering{
width: 900px;
display: block;
margin: 0 auto;
text-align: center;
}
/*-----------------*/



/*----ラインナップ------------------*/
.lineup-type{
margin: 0px 0;
text-align: center;
border: 0px solid #dcdcdc;
padding: 0px;
background-color: ;
  position: relative; 
  overflow: hidden; /* 下のulのcssでリスト全体を右に50%移動しているので、その分幅が広がってしまいスクロールバーが表示されてしまいます。それを防ぐ為の設定です。 */
}
.lineup-type img{
text-align: center;
}
ul.list-c{
padding: 0;
margin: 0 auto;
position: relative;
left: 50%; /* リスト全体であるul要素を右に50%移動。つまり先頭を中央に持ってくる感じです。 */
float: left;
}
.list-c li{
position: relative;
left: -50%; /* 各リスト項目になるli要素を左に50%移動。 */
float: left;
list-style: none;
text-align: left;
border: 1px solid #dcdcdc;
border-radius: 25px;
 -webkit-border-radius: 25px;/* for Safari and Chrome 対応*/
 -moz-border-radius: 25px;/* for Firefox 対応*/
width:430px;
height: 630px;
padding: 35px;
margin-top: 30px;
background-color: white;
font-size: 15px;
line-height: 1.5;
font-family: "source-han-sans-japanese",sans-serif;
font-weight: 200;
letter-spacing: 2px;
}
.list-c li+li{
margin-left: 40px;
}
.list-c li h3{
text-align: center;
font-size: 21px;
}
.list-c li h4{
text-align: center;
font-size: 16px;
letter-spacing: 0px;
color:#ff0000;
}
.list-c img{
width: 400px;
margin: 10px 0 ;
display: block;
}

.purchase{
}
.purchase a{
margin: 30px 0;
padding: 15px 0;
font-size: 20px;
font-family: "source-han-sans-japanese",sans-serif;
font-weight: 200;
letter-spacing: 2px;
line-height: 1.4;
text-align: center;
border: 3px solid #ffc0cb;
border-radius: 25px;
 -webkit-border-radius: 25px;/* for Safari and Chrome 対応*/
 -moz-border-radius: 25px;/* for Firefox 対応*/
background-color: #fff0f5;
display: block;
text-decoration: none;
color: black;
}
.purchase a:hover{
text-decoration: underline;
}

/*-----------フッター-----------------*/
.footer-contents{
text-align: center;
font-size: 80%;
margin: 50px 0 0 0;
padding: 2em;
}
.footer-contents img{
width: 360px;
margin: 20px 0;
}

/*- こちらのサイトもご覧ください----------------*/
.subtitle{/*こちらのサイトもご覧ください*/
font-weight:normal;
text-align: center;
font-size: 30px;
letter-spacing: 2px;
color: ;
margin: 20px 0 30px 0;
}
.link-btn{
margin: 50px 0;
text-align: center;
border: 0px solid #dcdcdc;
padding: 30px;
background-color:#fafafa ;
  position: relative; 
  overflow: hidden; /* 下のulのcssでリスト全体を右に50%移動しているので、その分幅が広がってしまいスクロールバーが表示されてしまいます。それを防ぐ為の設定です。 */
}
.link-btn img{
text-align: center;
}
ul.list-b{
padding: 0;
margin: 0 auto;
height: 400px;
position: relative;
left: 50%; /* リスト全体であるul要素を右に50%移動。つまり先頭を中央に持ってくる感じです。 */
float: left;
}
.list-b li{
position: relative;
left: -50%; /* 各リスト項目になるli要素を左に50%移動。 */
float: left;
list-style: none;
text-align: center;
font-family: "source-han-sans-japanese",sans-serif;
font-weight: 200;
letter-spacing: 2px;
font-size: 16px;
}
.list-b img{
width: 257px;
height:257px;
margin: 0 30px;
display: block;
}
/*-------------基本アクション　ページトップへ移動---------------*/

#pageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
#pageTop i{
margin: 0 0 0 0 ;
padding: 0 7px 0 0;
}
#pageTop a {
  display: block;
  z-index: 999;
  padding: 8px 0 0 8px;
  border-radius: 30px;
  width: 54px;
  height: 54px;
  background-color: #9FD6D2;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  }
 
#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}
/*-------------基本アクション　回り込み設定---------------*/

/* for modern brouser */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
/* IE7,MacIE5 */
.clearfix {
  display: inline-block;
}
/* WinIE6 below, Exclude MacIE5 \*/
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}
* {/* パディング調整用 */
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

/* 追記 */

/* リンクボタン２ */
.link-btn2 a{
    display: block;
    margin: 1em auto;
    border: 1px solid #dcdcdc;
    padding: 0.5em;
    text-align: center;    
    border-radius: 10px;
    text-decoration: none;
    color: #4d4d4d;
    background-color: white;
    box-shadow: 0px 0px 4px 0px #4d4d4d;
    
}
.sitelink{
	text-align: center;	
}
.sitelink a{
	text-decoration: none;
	margin: 5em 0 5em;
	color: #20b2aa;
	font-size: 32px;
}
h2.decorated {
      text-align: center;
      position: relative;
      font-size: 1.8em;
      margin: 40px 0;
    }

    h2.decorated::before,
    h2.decorated::after {
      content: "";
      display: inline-block;
      width: 120px;
      height: 24px;
      background-image: url("../img03/gs-leaf.png"); /* ← 飾り用の植物画像 */
      background-size: contain;
      background-repeat: no-repeat;
      margin: 0 10px;
      vertical-align: middle;
      opacity: 0.8;
    }

    h2.decorated::before {
      transform: scaleX(-1); /* ← 左側の画像を水平反転 */
      margin-right: 5px;
    }

    h2.decorated::after {
      margin-left: 5px;
    }