@charset "UTF-8";

/*共通*/

body {
  width: 100%;
  margin: 0;
}

img{
  width: 100%;
}

/*.fadein {
opacity : 0;
transform: translateY(20px);
transition: all 1s;
}*/

.mama_close {
  width: 100%;
  height: auto;
  background-color: #FFFFD6;
  font-size:13px;
  text-align:center;
  line-height:1.8:
}

.mama_btn_s {
  width: 100%;
  font-family: 'Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, serif;
  margin: 10% auto 15%;
}

.mama_btn_s :hover {
  opacity: 0.8;
}

.mama_btn_s a {
  position: relative;
  display: block;
  padding: 5% 5%;
  background: #182448;
  text-align: center;
  font-size: 12px;
  color: #fff;
  text-decoration: none;
  -webkit-transition: background .4s , color .4s;
  -o-transition: background .4s , color .4s;
  transition: background .4s , color .4s;
}

.mama_btn_s a:before {
  position: absolute;
  right: 2%;
  top: 50%;
  content: "";
  width: 0;
  height: 0;
  margin-top: -4px;
  margin-right: 5%;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent #fff;
  -webkit-transition: border-color .4s;
  -o-transition: border-color .4s;
  transition: border-color .4s;
}

.mama_btn_l {
  width: 90%;
  font-family: 'Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, serif;
  margin: 5% auto 20%;
  line-height: 1.5;
}

.mama_btn_l :hover {
  opacity: 0.8;
}

.mama_btn_l a {
  position: relative;
  display: block;
  padding: 5% 5%;
  background: #182448;
  text-align: center;
  font-size:12px;
  color: #fff;
  text-decoration: none;
  -webkit-transition: background .4s , color .4s;
  -o-transition: background .4s , color .4s;
  transition: background .4s , color .4s;
}

.mama_btn_l a:before {
  position: absolute;
  right: 2%;
  top: 50%;
  content: "";
  width: 0;
  height: 0;
  margin-top: -4px;
  margin-right: 5%;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent #fff;
  -webkit-transition: border-color .4s;
  -o-transition: border-color .4s;
  transition: border-color .4s;
}

.mama_title_logo {
  width: 100%;
  height: auto;
  margin: 0 auto;
  background-image:url(../img/mama1/title_bg.jpg);
  background-repeat: repeat;
  background-position: center center;
  background-size: 45px 326px;
  text-align:center;
  padding-top:5px;
  overflow:hidden;
}
.mama_title_logo img{
  width: 30%;
}

.mama_title {
  margin: 20% auto;
  text-align: center;
}
.mama_title img{
  width: 90%;
}

.mama_close .top_bg {
  width: 100%;
  height: auto;
  margin: 0 auto 0;
  background-image: url(../img/top/img12.svg);
  background-position: 45% 20%;
  background-repeat: no-repeat;
  background-size: 95%;
  text-align:center;
  padding: 0 0 10%;
}

.mama_link a:link { color: #48b5a0; }
.mama_link a:visited { color: #287768; }
.mama_link a:hover { color: #3addbe; }

#page-top {
  position: fixed;
  bottom: 2%;
  right: 2%;
  z-index:100000;
}
#page-top a {
  width: 40px;
  padding: 0 0;
  text-align: center;
  display: block;
  border-radius: 5px;
  z-index:100000;
}

.check{
  background: url(../img/top/check_bg.jpg);
  width: 100%;
  margin: 0 auto 0px;
  text-align: center;
  background-size: cover;
  padding: 40px 0;
}
#mama1 .check{
  margin-top: 30px;
}
#mama1 .check.last{
  margin-top: 0px;
}
#mama3 .check{
  background: #fff;
  height: auto;
  margin-top: 30px;
  padding-top: 30px;
  padding-bottom: 0;
  width: 94%;
}
.check p{
  font-weight: bold;
  line-height: 1.8;
  width: 87%;
  margin: auto;
  font-size: 15px;
  text-align: left;
}
#mama1 .check p{
  margin: 0px auto 0;
}
.check .box{
  background: #fff;
  border: #cccccc 1px solid;
  width: 87%;
  padding: 20px 0 20px;
  margin: 60px auto 30px;
  position: relative;
}
.check .box .check_img{
  position: absolute;
  left: -30px;
  top: -40px;
  width:140px;
}
.check .box .check_img img{
  width: 60%;
}
.check .box .blog_list{
  width: 90%;
  text-align: left;
  margin: 0 auto 0;
}
.check .box .blog_list.second{
  margin-bottom: 0;
}
.check .box .blog_list img{
  width: 100%;
  margin-bottom: 5px;
}
.check .box .blog_list .category{
  font-size: 12px;
  color: #ff92a5;
}
.check .box .blog_list .title{
  font-size: 18px;
  font-weight: bold;
  margin: 5px 0;
}
#mama1 .check .box .blog_list .title{
  margin: 0px 0;
  line-height: 1.7;
  text-align: left;
}
#mama2 .check .box .blog_list .title,
#mama4 .check .box .blog_list .title{
  margin: 0px 0;
  line-height: 1.7;
}
.check .box .blog_list .title a{
  text-decoration: none;
  color: #000;
}
.check .box .blog_list .date{
  font-size: 11px;
  color: #b2b2b2;
}
#mama3 .check .blog_link{
  width: 100%;
  margin: auto;
  background: url(../img/mama3/blog_bg.jpg);
  margin-top: 20px;
  padding-bottom: 20px;
}
.check .blog_link img{
  width: 80%;
}
#mama3 .check .blog_link img{
  width: 90%;
}
.check .blog_link .btn {
  width: 87%;
  margin: 20px auto 10px;
}
#mama3 .check .blog_link .btn {
  width: 92%;
  margin: 0px auto 10px;
}
.check .blog_link .btn a {
  position: relative;
  display: block;
  padding: 15px;
  background: #000;
  text-align: center;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  -webkit-transition: background .4s , color .4s;
  -o-transition: background .4s , color .4s;
  transition: background .4s , color .4s;
  border-radius: 430px;
}
#mama3 .check .blog_link .btn a {
  line-height: 1.5;
  border-radius: 35px;
}
#top .check .blog_link .btn a,
#mama1 .check .blog_link .btn a,
#mama2 .check .blog_link .btn a,
#mama3 .check .blog_link .btn a,
#mama4 .check .blog_link .btn a {
  padding: 8px;
}

/*indexページ*/

#top {
  width: 100%;
  overflow:hidden;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#top .main {
  width: 100%;
  height: auto;
  margin: 0 0 5%;
}

#top .sub {
  margin-top: -10%;
}

#top .sub .left {
  position: relative;
  z-index: 10;
}

#top .sub .right {
  margin: -10% 0 0;
  text-align: center;
}
#top .sub .right img{
  float: none;
  width: 90%;
}

#top .list {
  overflow: hidden;
  margin: 5% auto 10%;
  width: 90%;
}

#top .list img {
  float: left;
  margin: 3% 2%;
  width: 45%;
}

#top .story {
  width: 100%;
  height: auto;
  margin: 0 0 10%;
}

#top .cont {
  margin: 0 auto;
}

#top .left {
  overflow: hidden;
  margin-top: 10%;
}

#top .left img {
  z-index: 100;
}

#top .left .detail {
  width: 90%;
  margin: 10% auto 0;
}

#top .left .detail .title img {
}

#top .left .detail p {
  font-size:14px;
  line-height: 2;
}

#top .left .detail p span {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #F6F4B8));
  background: -webkit-linear-gradient(transparent 60%, #F6F4B8 60%);
  background: -o-linear-gradient(transparent 60%, #F6F4B8 60%);
  background: linear-gradient(transparent 60%, #F6F4B8 60%);
}

#top .right {
  overflow: hidden;
  margin-top: 10%;
}

#top .right.last {
  margin-bottom: 20%;
}

#top .right img {
}

#top .right .detail {
  width: 90%;
  margin: 50px auto 0;
}


#top .right .detail p {
  font-size:14px;
  line-height: 2;
}

#top .right .detail p span {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #F6F4B8));
  background: -webkit-linear-gradient(transparent 60%, #F6F4B8 60%);
  background: -o-linear-gradient(transparent 60%, #F6F4B8 60%);
  background: linear-gradient(transparent 60%, #F6F4B8 60%);
}


/*下層1 こどものいる暮らし提案*/

#mama1 {
  width: 100%;
  margin: auto;
  font-size:14px;
  line-height: 2.2;
  overflow:hidden;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#mama1 .main {
  width:100%;
  height:auto;
  background-image: url(../img/mama1/maru.svg);
  background-repeat:no-repeat;
  background-position : 0 -20px;
  background-size: 50% 45%;
}

#mama1 .main .cont {
  margin:0 auto;
  text-align: center;
}
#mama1 .main .cont img{
  width: 85%;
}

#mama1 .main .cont .text {
  text-align: left;
  margin-top:70px;
}

#mama1 .main .cont .illust {
  position: relative;
  text-align: right;
  width: 95%;
  margin: 20px 0 -80px;
}
#mama1 .main .cont .illust img{
  width: 32%;
}

#mama1 .section {
  margin: 20% auto 5%;
  text-align: center;
}

#mama1 .title {
  margin: 20% auto 5%;
  text-align: center;
}
#mama1 .title img{
  width: 60%;
}

#mama1 p {
  margin: 0 auto 4%;
  width: 90%;
}

#mama1 span, #mama2 span, #mama3 span, #mama4 span {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #F6F4B8));
  background: -webkit-linear-gradient(transparent 60%, #F6F4B8 60%);
  background: -o-linear-gradient(transparent 60%, #F6F4B8 60%);
  background: linear-gradient(transparent 60%, #F6F4B8 60%);
}

#mama1 .right {
  margin: auto;
  text-align: center;
}

#mama1 .right p {
  margin: 0 auto 50px;
  text-align: left;
}

#mama1 .right img {
  width: 90%;
  margin: 0 auto 30px;
}

#mama1 .list {
  margin: 0 auto 0;
  text-align: center;
}

#mama1 .list img {
  margin: 2% auto 2%;
  width: 90%;
}

#mama1 .link {
  width: 100%;
  height: auto;
  margin: 0 auto 0;
  background-image:url(../img/mama1/title_bg.jpg);
  background-repeat: repeat;
  background-position: center center;
  background-size: 45px 326px;
  text-align:center;
  overflow:hidden;
}

#mama1 .link img {
  margin: 10% auto 0;
  width: 90%;
}

.mama_close .mama1_bg {
  width: 100%;
  height: auto;
  margin: 0 auto 0;
  padding-bottom: 20%;
}
.mama_close .mama1_bg img{
  width: 100%;
  margin: 2% auto 10%;
}


/*下層2 自分時間を大切にママからワタシswitch*/

#mama2 {
  width: 100%;
  margin: auto;
  font-size:14px;
  line-height: 2.2;
  overflow:hidden;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#mama2 .main {
  width:100%;
  height:auto;
  background-image: url(../img/mama1/maru.svg);
  background-repeat:no-repeat;
  background-position : 0 -20%;
  background-size: 50% 45%;
}

#mama2 .main .cont {
  margin:0 auto;
  text-align: center;
}
#mama2 .main .cont img{
  width: 85%;
}
#mama2 .main .cont p{
  margin: 0 auto 4%;
  width: 90%;
}

#mama2 .main .cont .text {
  text-align: left;
  margin:15% auto 10%;
  width: 90%;
}

#mama2 .main .cont .illust {
  position: relative;
  text-align: right;
  width: 95%;
  margin: 20px 0 -50px;
}

#mama2 .main .cont .illust img{
  width: 25%;
}

#mama2 .story {
  width: 100%;
  height: auto;
  margin: auto;
  overflow:hidden;
}
#mama2 .story .copy-sub{
  width: 100%;
  text-align: center;
}


#mama2 .instagram {
  width: 100%;
  margin: 0 auto 0;
  padding-bottom:10%;
  background-image:url(../img/mama2/title_bg_pink.jpg);
  background-repeat: repeat;
  background-position: center center;
  background-size: 45px 326px;
  text-align:center;
  overflow:hidden;
  padding-top: 20px;
}
#mama2 .instagram img{
  width: 90%;
  margin: 10% auto 0;
}
#mama2 .instagram p {
  margin-top:0;
  font-size:14px;
  line-height:2;
}
#mama2 .instagram span {
  font-size:14px;
  background: none;
}
#mama2 .instagram ul {
  margin:0 auto 10%;
  padding-inline-start: 0px;
}
#mama2 .instagram li {
  text-align:center;
  margin:0 auto;
  list-style: none;
}
#mama2 .instagram li .text{
  padding:5%;
  background-image:url(../img/mama2/san.svg);
  background-size:100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  text-align:left;
  margin:0 auto 0;

}
#mama2 .instagram li .text p{
  font-size:13px;
  width: 88%;
  margin: 8% auto 0;
  line-height: 1.6;
}
#mama2 .instagram li .text p span{
  font-size: 14px;
}

.mama_close .mama2_bg {
  width: 100%;
  height: auto;
  margin: 0 auto 0;
  padding-bottom: 10%;
  line-height: 2;
}
.mama_close .mama2_bg img{
  width: 100%;
  margin:10% auto 10%;
}

/*下層3 先輩ママのおすすめカリモク*/

#mama3 {
  width: 100%;
  margin: auto;
  line-height: 2.2;
  overflow:hidden;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#mama3 .main {
  width:100%;
  height:auto;
  background-image: url(../img/mama3/maru.svg);
  background-repeat:no-repeat;
  background-position : 0 50px;
  background-size: 50% 45%;
}

#mama3 .main .cont {
  margin:0 auto;
  text-align: center;
}

#mama3 .main .cont img{
  width: 85%;
}

#mama2 .main .cont p{
  margin: 0 auto 4%;
  width: 90%;
}

#mama3 .main .cont .illust {
  position: relative;
  text-align: right;
  margin: 0 0 0 0;
}
#mama3 .main .cont .illust img{
  width: 28%;
}
#mama3 .main .cont .text {
  text-align: left;
  margin:0 auto 0;
  width: 90%;
  font-size: 14px;
}
#mama3 .main .book{
  width: 100%;
}
#mama3 #benchstyle{
  padding-top: 60px;
}
.mama_close .mama3_bg {
  width: 100%;
  margin: 0 auto 0;
  padding: 0 0 10%;
  background-color: #ffffd5;
  text-align:center;
}
.mama_close .mama3_bg img{
  width: 100%;
  margin: 10% auto 5%;
}

/*下層4 ママがカリモク家具を選ぶ理由BEST3!*/

#mama4 {
  width: 100%;
  margin: auto;
  font-size:14px;
  line-height: 2.2;
  overflow:hidden;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#mama4 .main {
  width:100%;
  height:auto;
  background-image: url(../img/mama1/maru.svg);
  background-repeat:no-repeat;
  background-position : 0 50px;
  background-size: 50% 45%;
}

#mama4 .main .cont {
  margin:0 auto;
  text-align: center;
}
#mama4 .main .cont p {
  margin: 0 auto 4%;
  width: 90%;
}

#mama4 .main .cont img{
  width: 85%;
}

#mama4 .main .cont .text {
  text-align: left;
  margin:15% auto 10%;
  width: 90%;
}

#mama4 .main .cont .illust {
  position: relative;
  text-align: right;
  width: 95%;
  margin: -10% 0 10%;
}

#mama4 .main .cont .illust img{
  width: 32%;
}

#mama4 .best1 {
  width:100%;
  background-image: url(../img/mama4/bg01.png);
  background-repeat:no-repeat;
  background-position : top center;
  background-size: 100% auto;
  text-align:center;
  margin:0 auto 20%;
  overflow:hidden;
}

#mama4 .best2 {
  width:100%;
  background-image: url(../img/mama4/bg02.png);
  background-repeat:no-repeat;
  background-position : top center;
  background-size: 100% auto;
  text-align:center;
  margin:0 auto 20%;
  overflow:hidden;
}

#mama4 .best3 {
  width:100%;
  background-image: url(../img/mama4/bg03.png);
  background-repeat:no-repeat;
  background-position : top center;
  background-size: 100% auto;
  text-align:center;
  padding-bottom:10%;
  margin:0 auto 0;
  overflow:hidden;
}

#mama4 .best3 .size_s {
  width:30%;
}

#mama4 .best3 p {
  color:#FFF;
}

#mama4 .box3 {
  width:90%;
  margin:10% auto 0;
  overflow:hidden;
}

#mama4 .box3 p {
  line-height:2;
  margin:0 auto;
}

#mama4 .box3 .left {
  width:100%;
}
#mama4 .box3 .right {
  width:100%;
}

#mama4 .box3 .comment {
  padding: 0 3%;
  text-align:left;
  line-height:1.8;
  font-size:14px;
}

#mama4 .quote {
  width:90%;
  margin:auto;
  text-align:right;
  font-size:13px;
  margin:5% 0 10%;
}

#mama4 .karimoku_voice {
  width:100%;
  background-image: url(../img/mama4/bg04.svg);
  background-repeat:repeat;
  background-position : top center;
  background-size: 17px 17px;
  text-align:center;
  margin:0 auto 0;
  padding:70px 0 15%;
  overflow:hidden;
}

#mama4 .karimoku_voice .box4 {
  width:90%;
  margin:0 auto 0;
  padding:10% 0 0;
  overflow:hidden;
}

#mama4 .karimoku_voice .box4 .left {
  margin:0;
}

#mama4 .karimoku_voice .box4 .right {
  margin:0;
}

#mama4 .karimoku_voice .box4 .text {
  text-align:left;
  line-height:2.2;
}

#mama4 .karimoku_voice .box4 p {
  margin:0;
}

#mama4 .karimoku_voice .box4 .find {
  font-size:20px;
  font-family: 'Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, serif;
  margin:8% auto 4%;
  text-align:center;
}

#mama4 .story {
  width: 100%;
  margin: auto;
}

#mama4 .story img {
  margin-bottom: 5%;
}

#mama4 .last {
  width: 90%;
  margin: 0 auto 20%;
  text-align:center;
}

.mama_close .mama4_bg {
  width: 100%;
  margin: 0 auto 0;
  padding: 0 0 5%;
  background-color: #ffffd5;
  text-align:center;
}

.mama_close .mama4_bg img{
  width: 100%;
  margin:10% auto 2%;
}