@charset "UTF-8";
@import url(normalize.css);
@import url(animate.css);
@import url(common.css);
/*color  ------------------*/
/*===============================================*/
/*  style.css */
/*===============================================*/
/*//////////////////////////////////

top
///////////////////////////////////*/
/**/
.bana2_what { width: 200px; position: absolute; top: 25%; right: 5%; z-index: 110; }

/*- @media 768px-*/
@media screen and (max-width: 768px) { .bana2_what { width: 100px; top: 28%; right: 2%; } }

/*heroHeader
---------------------------*/
.heroHeader-Wrap { position: relative; margin: 0 auto; max-width: 1200px; height: 100vh; }

.heroHeader { position: absolute; top: 5%; left: 0%; width: 100%; }

.heroHeader .heroHeader_h2ttl p { display: inline-block; margin-bottom: 10px; font-size: 4rem; line-height: 60px; font-weight: 600; letter-spacing: 0.1em; color: #fff; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; background-color: #008897; }

.heroHeader h3 { margin-bottom: 0px; font-size: 3rem; line-height: 40px; font-weight: 400; letter-spacing: 0.05em; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; }

/*- @media 1200px-*/
@media screen and (max-width: 1240px) { .heroHeader-Wrap { width: 97.5%; } }

/*- @media 768px-*/
@media screen and (max-width: 768px) { .heroHeader-Wrap { height: 500px; }
  .heroHeader { top: 0%; left: 0%; }
  .heroHeader .heroHeader_h2ttl p { margin-bottom: 10px; font-size: 2.2rem; line-height: 30px; }
  .heroHeader h3 { margin-bottom: 10px; font-size: 2.4rem; line-height: 24px; } }

/**/
.bd-wh { border: 3px solid #fff !important; }

.sec-Cmn-picup__list .bd-wh:hover { z-index: 1000; border: 3px solid #008897 !important; }

@media screen and (max-width: 670px) { .sec-Cmn-picup { margin: 0 auto 20px; }
  .sec-Cmn-picup__list { width: 100%; }
  .sec-Cmn-picup__list li { margin: 0 0 20px 0; padding-bottom: 0rem; width: 100%; border: 2px solid #008897 !important; }
  .sec-Cmn-picup__list li a { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; /**/ }
  .sec-Cmn-picup__list li a .sec-Cmn-picup__left { position: relative; margin-bottom: 0px; width: 50%; }
  .sec-Cmn-picup__list li a .sec-Cmn-picup__left figure { position: relative; width: 100%; height: 150px; }
  .sec-Cmn-picup__list li a .sec-Cmn-picup__left figure .pick-Wrap { position: relative; width: 100%; height: 150px; }
  .sec-Cmn-picup__list li a .sec-Cmn-picup__left figure .pick-Wrap .pick-Wrap2 { width: 100%; position: absolute; top: 50%; left: 50%; z-index: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
  .sec-Cmn-picup__list li a .sec-Cmn-picup__left figure .pick-Wrap .pick-Wrap2 .news-Badge { z-index: 10; top: 5%; right: 2%; height: 20px; padding: 0.5rem 1rem; border-radius: 3px; font-size: 1rem; line-height: 10px; }
  .sec-Cmn-picup__list li a .sec-Cmn-picup__left figure .pick-Wrap .pick-Wrap2 img { width: 100%; }
  .sec-Cmn-picup__list li a .sec-Cmn-picup__left .sec-Cmn-picup__category { position: relative; width: 100%; padding: 0.5rem; font-size: 1.2rem; }
  .sec-Cmn-picup__list li a .sec-Cmn-picup__tx { padding: 1rem 1rem; width: 50%; }
  .sec-Cmn-picup__list li a .sec-Cmn-picup__tx .button-small { margin: 10px auto 0; width: 120px; }
  .sec-Cmn-picup__list li a .sec-Cmn-picup__tx .button-small span { display: block; }
  .cmn-Btn { margin: 20px auto !important; width: 95% !important; }
  .cmn-Btn a { padding: 1rem 0; }
  /**/
  .sec-Cmn-picup__list li:hover { z-index: 1000; border: 2px solid #008897; }
  .bd-wh { border: 2px solid #fff !important; }
  .sec-Cmn-picup__list .bd-wh:hover { z-index: 1000; border: 2px solid #008897 !important; } }

@media screen and (max-width: 380px) { .sec-Cmn-picup__list li { margin: 0 0 20px; padding-bottom: 0rem; width: 100%; border: 2px solid #008897; }
  .sec-Cmn-picup__list li a .sec-Cmn-picup__left figure { height: 190px; }
  .sec-Cmn-picup__list li a .sec-Cmn-picup__left figure .pick-Wrap { height: 190px; }
  .sec-Cmn-picup__list li a .sec-Cmn-picup__left .sec-Cmn-picup__category { position: relative; width: 100%; padding: 0.5rem; font-size: 1.2rem; } }

/*sec-Cmn
------------------------------------*/
.sec-Cmn { margin: 0 auto 50px; padding: 0; width: 100%; }

/**/
.sec-women__tx { margin: 0 auto 30px; text-align: center; max-width: 800px; font-size: 1.6rem; line-height: 30px; letter-spacing: 0.05em; font-weight: 400; }

.sec-Cmn__list { margin: 0 auto; padding: 0; width: 100%; overflow: inherit; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.sec-Cmn__list li { margin: 0 0 30px; padding-bottom: 2rem; width: 32%; position: relative; background-color: #fff; border-radius: 10px; border: 3px solid #e4efef; overflow: hidden; display: block; -webkit-transition: all 0.2s; transition: all 0.2s; }

.sec-Cmn__list li a { display: block; -webkit-transition: all 0.2s; transition: all 0.2s; }

.sec-Cmn__list li a .sec-Cmn__left { margin-bottom: 15px; width: 100%; }

.sec-Cmn__list li a .sec-Cmn__left figure { position: relative; width: 100%; -webkit-transition: all 0.2s; transition: all 0.2s; background-color: #dff9ff; }

.sec-Cmn__list li a .sec-Cmn__left figure .news-Badge { position: absolute; top: 3%; right: 3%; padding: 1.7rem 0.8rem; border-radius: 100px; font-size: 1.2rem; line-height: 12px; letter-spacing: 0.03em; text-align: center; color: #fff; background-color: #008897; font-weight: 400; }

.sec-Cmn__list li a .sec-Cmn__left .sec-Cmn__category { position: relative; height: 30px; width: 100%; padding: 1rem 1rem; text-align: center; font-size: 1.4rem; line-height: 14px; letter-spacing: 0.05em; font-weight: 500; color: #1e1e1e; background-color: #dff9ff; }

.sec-Cmn__list li a .sec-Cmn__tx { padding: 0rem 2rem; width: 100%; }

.sec-Cmn__list li a .sec-Cmn__tx p { font-weight: 500; }

.sec-Cmn__list li a .sec-Cmn__tx .tag-Wrap .tag { margin-right: 5px; padding: 0.3rem 1rem; text-align: center; font-size: 1.2rem; line-height: 12px; letter-spacing: 0.05em; font-weight: 500; border-radius: 50px; color: #fff; background-color: #7d7d7d; }

.sec-Cmn__list li a .sec-Cmn__tx h3 { color: #757575; font-weight: 500; }

.sec-Cmn__list li a .sec-Cmn__tx .button-small { margin: 10px auto; width: 120px; }

/**/
.sec-Cmn__list a:hover .button-small:before { left: 0%; right: auto; width: 100%; }

.sec-Cmn__list a:hover .hvr-main { color: #fff !important; border-radius: 5px; border: 2px solid #008897; }

.sec-Cmn__list a:hover .arrow:after { border-left: 6px solid #fff; }

/*button hover*/
.sec-Cmn__list li:hover { z-index: 1000; border: 3px solid #008897; }

/**/
.bd-wh { border: 3px solid #fff !important; }

.sec-Cmn__list .bd-wh:hover { z-index: 1000; border: 3px solid #008897 !important; }

@media screen and (max-width: 670px) { .sec-Cmn { margin: 0 auto 20px; }
  .sec-women__tx { margin: 0 auto 10px; text-align: left; }
  .sec-Cmn__list { width: 100%; }
  .sec-Cmn__list li { margin: 0 0 20px; padding-bottom: 0rem; width: 100%; border: 2px solid #008897; }
  .sec-Cmn__list li a { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; /**/ }
  .sec-Cmn__list li a .sec-Cmn__left { position: relative; margin-bottom: 0px; width: 50%; }
  .sec-Cmn__list li a .sec-Cmn__left figure { position: relative; width: 100%; height: 150px; }
  .sec-Cmn__list li a .sec-Cmn__left figure .pick-Wrap { position: relative; width: 100%; height: 150px; }
  .sec-Cmn__list li a .sec-Cmn__left figure .pick-Wrap .pick-Wrap2 { width: 100%; position: absolute; top: 50%; left: 50%; z-index: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
  .sec-Cmn__list li a .sec-Cmn__left figure .pick-Wrap .pick-Wrap2 .news-Badge { z-index: 10; top: 5%; right: 2%; height: 20px; padding: 0.5rem 1rem; border-radius: 3px; font-size: 1rem; line-height: 10px; }
  .sec-Cmn__list li a .sec-Cmn__left figure .pick-Wrap .pick-Wrap2 img { width: 100%; }
  .sec-Cmn__list li a .sec-Cmn__left .sec-Cmn__category { position: relative; width: 100%; padding: 0.5rem; font-size: 1.2rem; }
  .sec-Cmn__list li a .sec-Cmn__tx { padding: 1rem 1rem; width: 50%; }
  .sec-Cmn__list li a .sec-Cmn__tx .button-small { margin: 10px auto 0; width: 120px; }
  /**/
  .sec-Cmn__list li:hover { z-index: 1000; border: 2px solid #008897; }
  .bd-wh { border: 2px solid #fff !important; }
  .sec-Cmn__list .bd-wh:hover { z-index: 1000; border: 2px solid #008897 !important; } }

@media screen and (max-width: 380px) { .sec-Cmn__list li { margin: 0 0 20px; padding-bottom: 0rem; width: 100%; border: 2px solid #008897; }
  .sec-Cmn__list li a .sec-Cmn__left figure { height: 190px; }
  .sec-Cmn__list li a .sec-Cmn__left figure .pick-Wrap { height: 190px; }
  .sec-Cmn__list li a .sec-Cmn__left .sec-Cmn__category { position: relative; width: 100%; padding: 0.5rem; font-size: 1.2rem; } }



/*//////////////////////////////////

annai - 04.php(特に女性におすすめ)
///////////////////////////////////*/

/*flex-box
---------------------------*/
.flex-Sb{display: flex; flex-wrap: wrap; justify-content: space-between; }

.annai { margin: 50px auto 0px; padding: 0; width: 100%; }

.annai h2 { margin-bottom: 20px; font-size: 2.8rem; line-height: 34px; letter-spacing: 0.05em; font-weight: 400; text-align: center; }

/*-----*/
.annai__Wrap { margin: 0 auto 30px; padding: 0; max-width: 1200px; background-color: #f2efe6; border-radius: 10px; overflow: hidden; }

.annai__Wrap h3 { padding: 1.5rem 0rem; font-size: 2.3rem; line-height: 26px; letter-spacing: 0.05em; font-weight: 400; text-align: center; color: #fff; background-color: #008897; }

/*-----*/
.annai__Inner { margin: 0 auto; padding: 3rem 3rem 1rem; width: 100%; }



/**/
.annai__List { margin: 0 auto; width: 100%; display: flex; flex-wrap:wrap; justify-content: space-between; }

.annai__List li { display: flex; flex-direction: column; margin: 0 0 20px; padding: 2rem; width: 32%; border-radius: 10px; background-color: #fff; }

.annai__List li h4 { margin-bottom: 15px; font-size: 1.8rem; line-height: 30px; letter-spacing: 0.05em; font-weight: 600; color: #008897; }

.annai__List li p { margin-bottom: 10px; line-height: 30px; font-weight: 400; }

.annai__List li a {margin-top: auto; display: block; transition: 0.2s; }

.annai__List li a:hover img{opacity: 0.7; }




/**/
.annai__Long { margin: 0 0 20px; padding: 2rem; width: 100%; border-radius: 10px; background-color: #fff; }

.annai__Long h4 { margin-bottom: 15px; font-size: 1.8rem; line-height: 30px; letter-spacing: 0.05em; font-weight: 600; color: #008897;  }

.annai__LongWrap { margin: 0 auto; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.annai__LongWrap li { width: 48%; }

.annai__LongWrap li p { margin-bottom: 15px; line-height: 30px; font-weight: 400; }

.annai__Flex { margin: 0 auto; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.annai__Flex a { width: 100%; line-height: 24px; text-align: center;}
.annai__Flex a:hover img{opacity: 0.7; }

.flex-Sb a { width: 49%; text-align: center;}

.search_Btn { margin: 0 auto; max-width: 400px; font-weight: 400; }

@media screen and (max-width: 768px) { .annai { margin: 30px auto 50px; }
  .annai h2 { margin-bottom: 10px; font-size: 1.8rem; line-height: 24px; }
  .annai__Wrap { margin: 0 auto 20px; }
  .annai__Wrap h3 { padding: 1rem 0rem; font-size: 1.8rem; line-height: 24px; }
  .annai__Inner { padding: 1.5rem 1.5rem 1rem; }
	
	
  .annai__List li { display: block; margin: 0 0 10px; padding: 1.5rem; width: 100%; }
  .annai__List li h4 { margin-bottom: 10px; font-size: 1.6rem; }
  .annai__List li p { margin-bottom: 10px; }
  .annai__List li a { margin-top: 10px; text-align: center; }
	
  .annai__Long { margin: 0 0 10px; padding: 1.5rem; }
  .annai__Long h4 { margin-bottom: 10px; font-size: 1.6rem; }
  .annai__LongWrap li { width: 100%; margin-bottom: 20px; }
  .annai__LongWrap li:last-child { margin-bottom: 0; }
  .annai__LongWrap li p { margin-bottom: 10px; line-height: 24px; }
  .annai__Flex a { text-align: center; width: 100%; line-height: 24px; margin-bottom: 10px; }
  .annai__Flex a:last-child { margin-bottom: 0; } }