/* 初期設定 */
@charset "UTF-8";
*{
  box-sizing:border-box; /*余白や線を幅や高さに含める*/
}
a:link {
  color: #36c;
}
a:visited {
  color: #609;
}
a:hover {
  color: #666;
}
header img{
  max-width:100%; /*画像が親要素からはみ出すのを防ぐ*/
  height:auto;
}
body {
  margin: 0;
  padding: 0;
  background-color: #fff;
}
p {
  line-height: 1.7;
}
/* ページの枠組み */
#page {
  margin: 0 auto;
  width: 800px;
}
.website {
  float: left;
  width: 400px;
  background-color: #fff;
  
}
.newinformation {
  float: right;
  width: 400px;
  margin-bottom: 40px;
  background-color: #fff;
}

/* Header */
header{
  width:800px;
  background-color:#d3d3d3;  /*薄いグレー*/
  display: flex; /*ロゴとulを横に並べる*/
  padding: 0 2%;
  justify-content: space-between;  /*両端に配置*/
  align-items: center;
}
  
/* navigation */

/* 処理の順番
1 サブメニューが隠れてる
2 内容に触れるとサブメニューでてくる
3 サブメニューに触れると色変わる
4 サブメニュから離れると消える
*/
/* -------------------- */
/* ▼メニューバーの装飾 */
/* -------------------- */
ul.ddmenu {
  margin: 0px;               /* メニューバー外側の余白(ゼロ) */
  padding: 0px 0px 0px 15px; /* メニューバー内側の余白(左に15px) */
  background-color: #d3d3d3; /* バーの背景色(濃い赤色) */
}

/* -------------------------- */
/* ▼メインメニュー項目の装飾 */
/* -------------------------- */
ul.ddmenu li {
  width: 125px;          /* メニュー項目の横幅(125px) */
  display: inline-block; /* ★横並びに配置する */
  list-style-type: none; /* ★リストの先頭記号を消す */
  position: relative;    /* ★サブメニュー表示の基準位置にする */
}
ul.ddmenu a {
  background-color: #d3d3d3; /* メニュー項目の背景色(濃い赤色) */
  color: white;              /* メニュー項目の文字色(白色) */
  line-height: 40px;         /* メニュー項目のリンクの高さ(40px) */
  text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
  text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
  font-weight: bold;         /* 太字にする */
  display: block;            /* ★項目内全域をリンク可能にする */
}
ul.ddmenu a:hover {
  background-color: #ffff80; /* メニュー項目にマウスが載ったときの背景色(淡いピンク) */
  color: #005500;            /* メニュー項目にマウスが載ったときの文字色(濃い赤色) */
}

/* ---------------------------------- */
/* ▼サブメニューがある場合に開く処理 */   /* ※サブメニューが1階層しか存在しない場合の記述 */
/* ---------------------------------- */
ul.ddmenu li:hover ul {
  display: block;      /*2 内容にマウスで触れるとサブメニューでてくる */
}

/* -------------------- */
/* ▼サブメニューの装飾 */
/* -------------------- */
ul.ddmenu ul {
  margin: 0px;         /* ★サブメニュー外側の余白(ゼロ) */
  padding: 0px;        /* ★サブメニュー内側の余白(ゼロ) */
  display: none;       /* 1 サブメニューが隠れてる */
  position: absolute; /* 画面上部に固定 */
  z-index: 1000;
}
/* ------------------------ */
/* ▼サブメニュー項目の装飾 */
/* ------------------------ */
ul.ddmenu ul li {
  width: 135px;               /* サブメニュー1項目の横幅(135px) */
  border-top: 1px solid pink; /* 項目上側の枠線(ピンク色で1pxの実線) */
}
ul.ddmenu ul li a {
  line-height: 35px;     /* サブメニュー1項目の高さ(35px) */
  text-align: left;      /* 文字列の配置(左寄せ) */
  padding-left: 5px;     /* 文字列前方の余白(5px) */
  font-weight: normal;   /* 太字にはしない */
}
ul.ddmenu ul li a:hover {
  background-color: #ffff80; /* 3 サブメニューに触れると色変わる */
  color: #005500;            /* サブメニュー項目にマウスが載ったときの文字色(濃い緑色) */
}

/* メインコンテンツ */
h2 {
  font-size: medium;
}
p, li {
  font-size: small;
}
.feat{
  background-color: #f2f2f2;
  display: flex;
  width: 800px;
}
.featm{
  background-color: #f2f2f2;
}
.feat h2{
  width: 200px;
  padding-left: 10px;
}

.category{
  background-color: #f2f2f2;
  padding: 60px 0 0 60px;
}
.features-section {
  width: 800px;
  background-color: #f2f2f2;
  color: #000000;
  padding: 40px;
  margin-bottom: 20px;
  text-align: center;
  display: flex; /* 横並びにする */
  justify-content: space-between; /* アイテムのスペースを均等にする */
}

.feature{
  flex-basis: calc(33.33% - 20px); /* アイテムの大きさ */
  flex-direction: column; /* 要素の配置位置が上から下へ */
  margin-right: 10px;
  margin-top: 30px;
}

.feature-image {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #ffffff;
}

.feature-title {
  font-size: 24px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.feature-description {
  font-size: 18px;
}
/* 紹介ページ */
main .visual {
  background: url(photo/home.jpeg) no-repeat center;
  background-size: 800px 400px;
  height: 400px;
  padding: 200px 50px 50px;
  box-sizing: border-box;
}
.visual p {
  color: #7f6666;
}
.visual p .catch {
  font-size: 45px
}
.inner {
  width: 800px;
  margin: 50px auto;
}
.inner h2 {
  margin: 10px 0 20px;
  font-weight: normal;
  font-size: 25px;
  color: #7f6666;
}
.visual p, .inner p {
  margin: 0 0 15px;
}
.inner section {
  display: flex;
  margin-top: 50px;
  justify-content: center; /* 1要素を中央に置く */
  align-items: center; /* 2要素を中央に置く */
}
.inner section div {
  padding: 0 40px 0 0;
  width: 400px;
}
.inner section:first-child {
  flex-direction: row-reverse; /* 反転して表示 右から左へ */
}
.inner section:first-child div {
  padding: 0 0 0 40px;
}
/* フッター */
footer {
  clear: both;
  border-top: 1px solid #ccc;
  text-align: center;
}