@charset "UTF-8";

html {
  font-size: 100%;
}
body {
  color: #333;
  font-size: 1rem;
  /*font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;*/
font-family: 'Kosugi', serif;
}
a {
  color: #333;
  text-decoration: none;
}
img {
  max-width: 100%;
}
.logo {
  width: 300px;
  line-height: 1px;
  margin-right: auto;/*初期値60px*/
}
li {
  list-style: none;
}




/*
コンテンツ幅を設定するための共通クラス
*/
.wrapper {
  max-width: 1200px;
  padding: 0 16px;
  margin: 0 auto;
}
.readmore {
  font-size: 1.125rem;
  text-align: center;
  background:linear-gradient(transparent 60%, #ffcc99 0%);
}
/*
疑似要素で下線を設定するために、「position: relative;」を設定
*/
.readmore a {
  padding-bottom: 1px;
  color: #333;
  position: relative;
}
/*
「position: absolute;」を設定し、left、bottomで下線の位置を調整
widthとheightで線の長さと高さを設定
疑似要素で線を表示させるためには、「content: '';」を設定すること
「transition: all 200ms ease;」でホバー時の速度などを設定
*/
.readmore a::after {
  content: '';
  position: absolute;
  height: 1px;
  width: 100%;
  left: 0;
  bottom: 0;
  background: #333;
  transition: all 200ms ease;
}
/*
ホバー時の下線の設定
「opacity: 0;」下線を非表示
「transform: translateY(3px);」下に3px移動
→下に3px移動しながら下線を非表示にする
*/
.readmore a:hover::after {
  opacity: 0;
  transform: translateY(3px);
}

/*-------------------------------------------
read_more2　段々と色が変わっていくパターン
-------------------------------------------*/


.read_more2 {
  position: relative;
  padding: 0.25em 0;
}
.read_more2:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
  background: linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
}



/*-------------------------------------------
midasi　背景グラデーション
-------------------------------------------*/
.back_gd {
  padding: 1rem 2rem;
  color: #fff;
  background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#fee140));
  background-image: -webkit-linear-gradient(left, #fa709a 0%, #fee140 100%);
  background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
}

/*-------------------------------------------
midasi　postit
-------------------------------------------*/

.head_testp {
    margin:  0;                 /* デフォルトCSS打ち消し */
    font-size:  24px;           /* 文字サイズ指定 */
    position:  relative;        /* 位置調整 */
    font-weight:  normal;       /* 文字の太さ調整 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #feeaac;  /* 背景色指定 */
    padding:  10px;             /* 余白指定 */
    margin-bottom: 15px;        /* 周りの余白指定 */
    border-radius:  2px;        /* 角丸指定 */
}
pp {
    margin:  0;                 /* デフォルトCSS打ち消し */
    line-height: 2;             /* 行間調整 */
}
.head_testp:before {
    content:  '';               /* 空白の要素を作る */
    background-color: #b3b3b3;  /* 背景色指定 */
    display:  block;            /* ブロック要素にする */
    position:  absolute;        /* 位置調整 */
    left: 50%;                  /* 位置調整 */
    height: 60%;                /* 高さ指定 */
    top: 26%;                   /* 位置調整 */
    z-index:  -1;               /* 重なり調整 */
    width: 46%;                 /* 幅指定 */
    box-shadow: 0 0 8px 8px #b3b3b3;/* 影指定 */
    transform: rotate(3deg);    /* 回転 */
}


/*-------------------------------------------
h3 オレンジグラデーション
-------------------------------------------*/

h3 {
  padding: 1rem 1rem;
  color: #fff;
  background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#fee140));
  background-image: -webkit-linear-gradient(left, #fa709a 0%, #fee140 100%);
  background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
}
.side-title {
  font-size: 1.125rem;
  font-weight: normal;
  margin-bottom: 5px;
}

/*-------------------------------------------
h2用
-------------------------------------------*/

.head_test {
    margin:  0;                     /* デフォルトCSS打ち消し */
    font-size:  24px;               /* 文字サイズ指定 */
    position:  relative;            /* 位置調整 */
    font-weight:  lighter;           /* 文字の太さ調整 */
    margin-bottom: 15px;            /* 周りの余白指定 */
    padding-top: 50px;              /* 余白指定 */
    padding-left: 40px;             /* 余白指定 */
}
p {
    margin:  0;                     /* デフォルトCSS打ち消し */
    line-height: 2;                 /* 行間調整 */
    padding-left:  40px;            /* 余白指定 */
}
.head_test:before {
    content:  '';                   /* 空白の要素を作る */
    width: 0;                       /* 幅指定 */
    height: 0;                      /* 高さ指定 */
    border-style: solid;            /* 三角を作る */
    border-width: 0px 0 110px 80px; /* 三角を作る */
    border-color: transparent transparent #a3d0e4 transparent;  /* 三角を作る */
    position:  absolute;            /* 位置調整 */
    z-index:  -1;                   /* 重なり調整 */
    transform: rotate(30deg);       /* 回転 */
    top: -20px;                     /* 位置調整 */
    left: 30px;                     /* 位置調整 */
}


/*-------------------------------------------
pankuzu1blue
-------------------------------------------*/

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline;
  list-style: none;
  font-weight: normal;
}

.breadcrumb li:after {
  content: '>';
  padding: 0 0.2em;
  color: #555;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #16165b;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}





/*-------------------------------------------
pankuzu2gray
-------------------------------------------*/
/*
.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  position: relative;
  display: inline-block;
  list-style: none;
  font-weight: bold;
  margin-right: 0.2em;
}

.breadcrumb li:after {
  content: "";
  position: absolute;
  top: 7px;
  right: -19px;
  border-style: solid;
  border-color: transparent;
  border-left-color: #e2e2e2;
  border-width: 7px 12px;
  width: 0;
  height: 0;
}

.breadcrumb li:last-child:after {
  content: none;
}

.breadcrumb li a {
  display: inline-block;
  padding: 0 0.3em;
  height: 28px;
  line-height: 28px;
  text-decoration: none;
  color: #9b9b9b;
  background: #e2e2e2;
  font-size: 13px;
  border-radius: 3px;
  transition: 0.3s;
}

.breadcrumb li a:hover {
  transform: translateY(-3px);
}
*/
/*-------------------------------------------
header
-------------------------------------------*/
/*
「position: fixed;」でヘッダーを固定し、「z-index: 10;」で前面に表示
※他のコンテンツでpositionをrelative、absolute、fixedのいずれかに
設定している場合は、z-indexの数値が大きい方が前面に表示される
*/
#header {
  width: 100%;
  background-color: #fff;
  position: fixed;
  z-index: 10;
  justify-content: space-between;
  align-items: center;
/*align-items: flex-start*/
}


#header .inner {
  display: flex;
  justify-content: flex-start;
}

#header .linner {
  display: flex;
  align-items: flex-start;
}

#header .site-title {
  padding: 6px 16px;
  line-height: 1px;

}
/*
「display: inline-block;」でリンクを親要素の範囲に広げる
※blockを指定すると横幅いっぱいまで広がってしまうため、
inline-blockを設定している
*/
#header .site-title a {
  display: inline-block;
}

  #header .midasi {
  width: 700px;
  height: 80px;
  line-height: 80px;
  background-color: #fff;
  color: #000;

font-size: 0.875rem;/*初期値1.00rem*/
  display: inline-block;
  text-align: end;
	bottom: 0;
}

#header .contact { 
  width: 180px;
  height: 45px;
  margin: 30px 5px 5px;;
  line-height: 80px;
  background-color: #16165b;
  color: #fff;
  font-size: 1.00rem;/*初期値1.00rem*/
  display: inline-block;
display:flex;
justify-content:center;
align-items:center;

}
#header .contact:hover {
  background-color: #333;
}




#navi {
  background-color: #333;
}
#navi a {
  color: #fff;
}
#navi ul {
  display: flex;
  justify-content: end;
  align-items: center;
}
#navi li {
  font-size: 0.875rem;
  /*padding: 10px 20px 10px 0;*/
  padding: 10px 60px 10px 0;
}


/*-------------------------------------------
mainvisualu
-------------------------------------------*/
/*
height: 100vh;
メインビジュアルを画面の高さにあわせる
position: relative;
ロゴの位置を固定するため、親要素の「position」に「relative」を設定
*/
#mainvisualaircon {
  width: 100%;
  height: calc(100vh - 80px);
  background-image: url(../img/ranking1.jpg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  margin-bottom: 30px;
  position: relative;
  object-fit: cover;
}
/*-------------------------------------------
mainvisualantena
-------------------------------------------*/
/*
height: 100vh;
メインビジュアルを画面の高さにあわせる
position: relative;
ロゴの位置を固定するため、親要素の「position」に「relative」を設定
*/
#mainvisualantena {
  width: 100%;
  height: calc(100vh - 80px);
  background-image: url(../img/antena.jpg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  margin-bottom: 30px;
  position: relative;
  object-fit: cover;
}
/*
メッセージ
「position: absolute;」を設定してから調整
*/
.caption_area {
    position:  absolute;        /* 要素の配置方法を指定 */
    /*background-color:  #555;    /* 背景色指定 */
    color:  #fff;               /* 文字色指定 */
    padding: 0px;              /* 余白指定 */
    /*width: 320px;              /* 幅指定375or320px */
    height: 90px;               /* 高さ指定 初期45px */
    /*text-align:  center;*/        /* 文字を中央揃えに */
    /*font-size: 18px;            /* フォントサイズ指定20or18px */
    font-family: 'Shippori + Mincho', serif;
    font-size: calc(100vw / 50);
    top:  180px;                    /* 上からの位置指定 */
    bottom:  0;                 /* 下からの位置指定 */
    left:  130px;                   /* 左からの位置指定 */
    right:  0;                  /* 右からの位置指定 */
    /*margin:  auto;*/              /* 位置調整と組み合わせて上下中央に */
  line-height:1.5;
}

/*-------------------------------------------
pickup
-------------------------------------------*/
#pickup {
  display: flex;
  justify-content: space-between;
  padding-top: 150px;
  margin-bottom: 60px;
}
#pickup article {
  width: 32%;
}
#pickup .article-title {
  font-size: 0.875rem;
    font-weight:  normal;           /* 文字の太さ調整 */
  line-height:1.5;
  margin: 10px 0 15px 0;
}

/*-------------------------------------------
エアコン用pickup
-------------------------------------------*/
#pickupair {
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  margin-bottom: 60px;
}
#pickupair article {
  width: 32%;
}
#pickupair .article-title {
  font-size: 0.875rem;
    font-weight:  normal;           /* 文字の太さ調整 */
  line-height:1.5;
  margin: 10px 0 15px 0;
}


/*-------------------------------------------
container
-------------------------------------------*/
#container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}
main {
  width: 65%;
}
main article {
  margin-bottom: 80px;
}
main .article-title {
  font-size: 1.5rem;
  margin: 10px 0 15px 0;
}
main ul {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
}
main li {
  font-size: 0.875rem;
  margin-right: 20px;
}
main .text {
  /*padding: 10px 40px 30px 40px;*/
padding: 10px 10px 20px;
}

/*-------------------------------------------
aside
-------------------------------------------*/
#sidebar {
  width: 33%;
  padding: 20px;
}
#sidebar .side-title {
  font-size: 1.125rem;
  font-weight: normal;
  margin-bottom: 5px;
}

.author {
  text-align: left;
  margin-bottom: 1px;
}
.author img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  margin-bottom: 30px;
}
.author .profile {
  font-size: 0.975rem;
  text-align: left;
  background-color: #f7f7f7;
padding: 10px 10px 20px;/**/
}
.ranking {
  text-align: center;
  margin-bottom: 10px;
  background-color: #f7f7f7;
}
.ranking article {
  margin-bottom: 30px;
}
.ranking .article-title {
  font-size: 1.125rem;
  font-weight: normal;
  /*text-align: left;*/
  text-align: center;
  background:linear-gradient(transparent 60%, #ffcc99 0%);
}

#sidebar .ranking .btn { 
  width: 180px;
  height: 50px;
  margin: 5px 5px 5px;;
  line-height: 20px;
  /*background-color: #16165b;*/
  background-color: #a3d0e4;
  color: #fff;
  font-size: 0.875rem;/*初期値1.00rem*/
  display: inline-block;
display:flex;
justify-content:center;
align-items:center;
}
#sidebar .ranking .btn:hover {
  background-color: #333;
}


.foo {
  display: flex;
font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  /*text-align: center;*/
  line-height:2;
  justify-content: center;
}
.archive {
  text-align: center;
  margin-bottom: 60px;
}
.archive ul {
  border-bottom: solid  1px #777;
}
.archive li {
  font-size: 0.875rem;
  border-top: solid  1px #777;
  padding: 20px;
  text-align: left;
}

#sidebar .text {
  /*padding: 10px 40px 30px 40px;*/
padding: 10px 10px 20px;
}
/*-------------------------------------------
Location
-------------------------------------------*/
#location {
  margin-top: 20px;
}
#location .location-img {
  /*background-image: url(../img/location.jpg);*/
  position: relative;
}
#location .item-map {
  /* グーグルマップをグレースケールにする */
  filter: grayscale(1);
  margin-bottom: 20px;
}
/* グーグルマップのサイズを設定 */
#location .item-map iframe {
  width: 100%;
  height: 400px;
  border: 0;
}
#location .item-info {
  text-align: left;
}
#location .item-info p {
  margin-bottom: 10px;
}


/*-------------------------------------------
Contact
-------------------------------------------*/
#contact dl {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
#contact dt {
  width: 15%;
}
#contact dd {
  width: 85%;
  margin-bottom: 10px;
}
#contact dd input,
#contact dd textarea {
  width: 100%;
  border: solid 1px #c8c8c8;
  padding: 10px;
}
#contact dd textarea {
  height: 10rem;
}
#contact .button {
  text-align: center;
}
#contact .button input {
  width: 200px;
  background-color: #16165b;
  color: #fff;
  padding: 15px 0;
  border: solid 1px #16165b;
}
#contact .button input:hover {
  background: #fff;
  color: #24292e;
}

#contact .logotel {
  width: 300px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
}


/*-------------------------------------------
footer
-------------------------------------------*/
#footer {
  font-size: 0.875rem;
font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  background-color: #f7f7f7;
}
#footer .content {
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  padding-bottom: 50px;
}
#footer .item {
  width: 30%;
}
#footer .footer-title {
  font-size: 1.125rem;
  font-weight: bold;
  margin-bottom: 30px;
}
#footer ul.about-list {
  margin: 20px 0;
}
#footer ul.about-list li {
  margin-bottom: 5px;
}
#footer ul.about-list .arrow {
  position: relative;
  display: inline-block;
  padding-left: 12px;
  color: #333;
}
/*
疑似要素で三角矢印を表示
border〜プロパティで三角を作り、positionで位置調整
*/
#footer ul.about-list .arrow::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #333;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -6px;
}
#footer .menu-list {
  border-bottom: solid  1px #777;
}
#footer .menu-list > li {
  border-top: solid  1px #777;
  padding: 15px;
  text-align: left;
}
#footer .copyright {
  font-size: 0.750rem;
  text-align: center;
  padding: 10px 0;
}



/*-------------------------------------------
SP max-width: 1300px
-------------------------------------------*/
@media screen and (min-width: 960px) and (max-width: 1300px) {
/*-------------------------------------------
aside 0.85
-------------------------------------------*/
#sidebar .author .profile {
  font-size: 0.835rem;
  text-align: left;
  background-color: #f7f7f7;
padding: 10px 10px 20px;/**/
}
#sidebar .text {
  /*padding: 10px 40px 30px 40px;*/
  font-size: 0.835rem;
}



}











/*-------------------------------------------
SP max-width: 767px
-------------------------------------------*/
@media screen and (max-width: 960px) {
  /*-------------------------------------------
  header
  -------------------------------------------*/
  #header .inner {
  /*#header .site-title {*/
    padding: 6px 10px;
  justify-content: center;
  }

  #header .logo {
  width: 300px;
  line-height: 1px;
  /*margin-right: auto;/*初期値60px*/
margin : 0 auto 
}

  #header .inner {
    flex-direction: column;
    align-items: flex-start;
  }

  #header .midasi {
    display: none;
  }

  #header .contact {
    display: none;
  }

  #navi {
    /* 横スクロールを表示 */
    overflow-x: scroll;
  }

#navi ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

#navi li {
  font-size: 0.875rem;
  padding: 10px 20px 10px 0;
}




  /*-------------------------------------------
  Mainvisualu
  -------------------------------------------*/
  #mainvisualaircon {
    margin-bottom: 30px;
  }

  #mainvisualaircon .caption_area {
    position:  absolute;        /* 要素の配置方法を指定 */
    /*background-color:  #555;    /* 背景色指定 */
    color:  #000;               /* 文字色指定 */
    padding: 0px;              /* 余白指定 */
    width: 320px;              /* 幅指定375or320px */
    height: 90px;               /* 高さ指定 */
    /*text-align:  center;*/        /* 文字を中央揃えに */
    font-size: 18px;            /* フォントサイズ指定20or18px */
    top:  300px;                    /* 上からの位置指定 */
    bottom:  0;                 /* 下からの位置指定 */
    left:  0;                   /* 左からの位置指定 */
    right:  0;                  /* 右からの位置指定 */
    margin:  auto;              /* 位置調整と組み合わせて上下中央に */
  line-height:1.5;
}

  /*-------------------------------------------
  Mainvisualantena
  -------------------------------------------*/
  #mainvisualantena {
    margin-bottom: 30px;
  }

  #mainvisualantena .caption_area {
    position:  absolute;        /* 要素の配置方法を指定 */
    /*background-color:  #555;    /* 背景色指定 */
    color:  #fff;               /* 文字色指定 */
    padding: 0px;              /* 余白指定 */
    width: 320px;              /* 幅指定375or320px */
    height: 45px;               /* 高さ指定 */
    /*text-align:  center;*/        /* 文字を中央揃えに */
    font-size: 18px;            /* フォントサイズ指定20or18px */
    top:  300px;                    /* 上からの位置指定 */
    bottom:  0;                 /* 下からの位置指定 */
    left:  0;                   /* 左からの位置指定 */
    right:  0;                  /* 右からの位置指定 */
    margin:  auto;              /* 位置調整と組み合わせて上下中央に */
  line-height:1.5;
}

  /*-------------------------------------------
  pickup
  -------------------------------------------*/
  #pickup {
    flex-direction: column;
    padding-top: 140px;
  }
  #pickup article {
    width: 100%;
    margin-bottom: 30px;
  }

  /*-------------------------------------------
  エアコン用pickup
  -------------------------------------------*/
  #pickupair {
    flex-direction: column;
    padding-top: 40px;
  }
  #pickupair article {
    width: 100%;
    margin-bottom: 30px;
  }

  /*-------------------------------------------
  container
  -------------------------------------------*/
  #container {
    flex-direction: column;
  }
  main {
    width: 100%;
  }

  /*-------------------------------------------
  aside
  -------------------------------------------*/
  #sidebar {
    width: 100%;
    padding: 0;
  }

  /*-------------------------------------------
  footer
  -------------------------------------------*/
  #footer .content {
    flex-direction: column;
  }
  #footer .item {
    width: 100%;
    margin-bottom: 30px;
  }
}