@charset "utf-8";

/*
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 300;
  src: url(../common/fonts/NotoSerifCJKjp-Light.otf) format('opentype');
}
*/

#content,
#content * {
    box-sizing: border-box;
}

#sp_tab {
    display: none;
}

img {
    max-width: 100%;
    height: auto;
}

#content {
    font-family: 'Noto Serif Japanese', serif;
    position: relative;
    width: 100%;
}

#content_intro {
    position: relative;
}

/* 枠 */

#frame {
    width: 100%;
    height: calc(100vh - 105px);
    position: fixed;
    overflow: hidden;
    bottom: -88px;
    z-index: 999;
    pointer-events: none;
}

#frame.frame-out {
    position: absolute;
}

#frame .frame_parts {
    background-repeat: repeat;
    position: absolute;
    width: 20px;
    height: 20px;
    z-index: 10;
}

#frame > #frame_top {
    top: 0;
    left: 0;
    width: 100%;
    background-image: url(../img/ritoutime/frame_top.png)
}
#frame > #frame_left {
    top: 0;
    left: 0;
    height: 100%;
    background-image: url(../img/ritoutime/frame_left.png)
}
#frame > #frame_right {
    top: 0;
    right: 0;
    height: 100%;
    background-image: url(../img/ritoutime/frame_right.png)
}
#frame > #frame_bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    background-image: url(../img/ritoutime/frame_bottom.png)
}

/* 花 */

.flower_parts {
    position: absolute;
    width: 11vw;
    z-index: 9;
}

.flower_parts_sp {
    display: none;
}

.out-screen .flower_parts {
    position: absolute;
}

#flower_left {
    bottom: 150px;
    left: 0;
}
#flower_right {
    top: 0;
    right: 0;
}

.flower_parts img {
    position: absolute;
    left: 0;
    right: 0;
    transition: transform 0.5s ease;
}

.flower_parts img#flower_left1 {}
.flower_parts img#flower_left2 {left: 8vw}
.flower_parts img#flower_right1 {left: -4vw}
.flower_parts img#flower_right2 {}

/* コンテンツ */

#ritoutime {
    width: 1226px;
    margin: auto;
    padding: 100px 50px;
}



/* フェードイン設定 */
#ritoutime section.fade_starter {
    position: absolute;
    width: 100%;
    height: 5px;
    bottom: 20%;
    left: 0;
    right: 0;
}

#ritoutime section.fade_in {
    margin-left: 100px;
    margin-right: 100px;
    transition: all 2s ease;
    max-width :100%;
}

#ritoutime section {
  position: relative;
    margin-bottom: 100px;
    margin-left: 150px;
    margin-right: 150px;
    opacity: 1;
    display: -webkit-flex;
    display: flex;
    justify-content:space-between;
  -webkit-justify-content:space-between;
}
#top_section {
  margin-left: 100px;
  margin-right: 100px;
}

#ritoutime section.fade_in img{
  width :100%;
}
#ritoutime section img{
  width :95%;
}

/*フェードイン前の透明削除
#ritoutime section * {
    transition: opacity 2s ease;
}

#ritoutime .image img {opacity: ０;}
#ritoutime .fade_in img {opacity: 1} 

#ritoutime .fade_in img:nth-child(1) {transition-delay: 1s}
#ritoutime .fade_in img:nth-child(2) {transition-delay: 1.5s}
#ritoutime .fade_in img:nth-child(3) {transition-delay: 2s}
#ritoutime .fade_in img:nth-child(4) {transition-delay: 2.5s}
#ritoutime .fade_in img:nth-child(5) {transition-delay: 3s}

#ritoutime .verb {
    opacity: 0;
    
}
#ritoutime .fade_in .verb {
    opacity: 1;
    transition-delay: 0.5s;
}

#ritoutime .text {
    opacity: 0;
    
}
#ritoutime .fade_in .text {
    opacity: 1;
}

#top_section .text {
    opacity: 1;
}
*/

/* フェードイン設定ここまで */
#top_section .image img {
    max-width: 100%;
}

#ritoutime .image {
    width: 52%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

#ritoutime section:first-child .image img {
    width: 100%; /* IE表示崩れ防止 */
}

#ritoutime section:nth-child(2n) .image {
    justify-content: flex-end;
}

#spend .image {
    width: 45%;
}

#feel .image {
    align-items: flex-end;
    width :calc(35% - 10px);
    margin-right :20px;
}

#ritoutime .image img.marginTop {
    margin-top: 20px;
}

#ritoutime .image img#see1 {width: 100%}
#ritoutime .image img#see2 {width: calc(55% - 10px)}
#ritoutime .image img#see3 {width: calc(45% - 10px)}
#ritoutime .image img#spend1 {width: 100%}
#ritoutime .image img#spend2 {width: 80%;}
/*
#ritoutime .image img#feel1 {width: calc(67% - 10px)}
*/
#ritoutime .image img#feel2 {width: calc(33% - 10px)}

#ritoutime .text {
  /*
    width: 48%;
    margin: auto;
  */
    letter-spacing: 0.27rem;
    line-height: 2.1;
    text-align: center;
}

#ritoutime .text img {
    width: 300px;
    object-fit: contain;
}

.verb {
    width: 35px;
    /*
    position: absolute;
    */
}
/*
#see .verb {left: 42%}
#spend .verb {left: 47%}
#feel .verb {right: 0.5%}
*/
#content_intro h3 img {
    width: 550px;
    max-width: 90%;
}

/* 記事一覧 */

#content_article {
    width: 1026px;
    padding: 80px 0 20px;
    margin: auto;
}

#content_article h3 {
    font-size: 32px;
    margin: 10px 0 30px;
    line-height: 1.5;
    letter-spacing: 0.2em;
}

#content_article ul {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
}

#content_article ul li {
    width: 30%;
    margin: 0 1.5% 50px;
}

#content_article p {
    margin: 10px 0 5px;
    color: #666666;
    flex-wrap: wrap;
    display: flex;
    align-items: center;
}

#content_article ul li:nth-child(-n+3) p::before {
    display: inline;
    content: 'New';
    margin-right: 5px;
    border-radius: 5px;
    padding: 1px 8px;
    color: #05A49D;
    border: 1px solid #22BCB8;
    font-family: sans-serif;
}

#content_article h4 {
    font-size: 16px;
    color: #666666;
}

#magazine_dl {
    width: 30%;
    margin: auto;
}

/*IEズレズレ修正*/
#feel .image .verb {
  display :none;
}
.text-contaner {
  width :48%;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.text-contaner .text {
  width :100%;
}
#see .text-contaner {
  width :calc(48% - 80px);
}
#feel .verb {
  /*
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
  */
}
.feel-container {
  width :calc(18% - 10px);
  display: -webkit-flex;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-direction :column;
}
.feel-container .verb {
   height :118px;
  margin-bottom :10px;
}

.mobile-container {
  display :none;
}
/*記事一覧のズレ修正*/
.img-background {
    height: 205px;
}
/* //////////////////////// スマートフォン //////////////////////// */

@media only screen and (max-width: 768px) {
#wrapper {
    padding-top: 60px;
    }

#sp_tab {
    display: flex;
    position: fixed;
    width: 100%;
    z-index: 1000;
    top: 60px;
    height: 40px;
    margin-top: 24px;
    background-color: #FFF;
    font-size: 12px;
}

#sp_tab a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 0 50%;
    color: currentColor;
    padding: 0;
}

#sp_tab a:nth-child(1) {background: #41CAF1; color: #FFF}
#sp_tab a:nth-child(2) {background: #C5E7EB;}

#content {
    padding: 30px 0 0;
    }

#content_intro {
    margin: 10px 5px;
}
 
/* 枠 */
#frame .frame_parts {
    width: 10px;
    height: 10px;
    }

#frame {
    top: 0;
    bottom: auto;
    height: 100%;
    position: absolute;
}

/* 花 */
.flower_parts {
    display: none;
}

.flower_parts_sp {
    display: block;
    position: absolute;
    width: 15vw;
    z-index: 9;
    background-size: contain;
    background-repeat: no-repeat;
}

.flower_parts_sp_left {
    background-image: url(../img/ritoutime/flower_left_sp.png);
    width: 58px;
    height: 106px;
    /*height: 30.75vw;*/
    left: 0;
}

.flower_parts_sp_right {
    background-image: url(../img/ritoutime/flower_right_sp.png);
    width: 54px;
    height: 110px;
    /*height: 27.45vw;*/
    right: 0;
}

#flower_left_sp1 {top: calc(88vw + 50px);}
#flower_right_sp1 {top: 10px;}

#flower_left_sp2 {top: calc(146vw + 400px);}
#flower_right_sp2 {top: calc(120vw + 800px);}

#ritoutime {
    width: 100%;
    margin: auto;
    padding: 50px 10px;
}
#ritoutime section.fade_in {
    margin-left: 0;
    margin-right: 0;
    transition: all 2s ease;
}
#ritoutime section {
    flex-wrap: wrap;
    margin-bottom: 30px;
    padding: 5px;
    margin-left: 0;/*フェードイン削除*/
    margin-right: 0;/*フェードイン削除*/
}

#ritoutime section .fade_starter {
    position: absolute;
    width: 100%;
    height: 5px;
    bottom: 20%;
}

#ritoutime .image,
#ritoutime section#spend .image {
    width: calc(95% - 100px);
    align-content: flex-start;
}
#ritoutime section#see .image { /*spズレ修正*/
    width: calc(90% - 100px);
}
#ritoutime .text {
    font-size: 12px;
    letter-spacing: 0.15em;
}
/*
#ritoutime section:nth-child(1) .text {
    width: 80%;
    order: -1;
    margin-bottom: 20px;
    text-align: left;
    margin-left: 0;
}
*/
#top_section .text-contaner {
    width: 80%;
    order: -1;
    margin-bottom: 20px;
    text-align: left;
    margin-left: 0;
}
#ritoutime section:nth-child(1) .text p {
    display: none;
}

#ritoutime section:nth-child(1) .image {
    width: 90%;
}


#ritoutime section:not(:nth-child(1)) .text {
    text-align: left;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
}

#ritoutime .image img.marginTop {
    margin-top: 4px;
}

#ritoutime .image img.marginRight {
    margin-right: 5px;
}

.verb {
    width: 25px;
    height : 85px;
}

#ritoutime .image img#see1 {width: 100%}
#ritoutime .image img#see2 {width: calc(54% - 2px)}
#ritoutime .image img#see3 {width: calc(44% - 2px)}
#ritoutime .image img#spend1 {width: 100%}
#ritoutime .image img#spend2 {width: 80%; margin-left: auto;}
#ritoutime .image img#feel1 {width: 100%;}
/*
#ritoutime .image img#feel1 {width: calc(67% - 2px)}
#ritoutime .image img#feel2 {width: calc(33% - 2px)}
*/
/*
#see .verb {left: auto; right: calc(95% - 95px);}
#spend .verb {left: auto; right: 10px;}
#feel .verb {left: 130px; right: auto}
*/
/*
#see .text {padding-top: 100px; margin-right: 5px; height: 360px;}

#spend .text {padding-top: 60px; margin-right: 10px; height: 420px;}
*/
#feel .text {padding-top: 0; margin-right: 5px; height: 340px;}

#feel {
    margin-top: calc(45vw - 250px);
}
/*
#feel .image {
    align-self: flex-end;
    padding-top: 100px;
}
*/
#content_article {
    width: 100%;
    padding-top: 50px;
}

#content_article h3 {
    font-size: 24px
}
#content_article ul li {
    width: 47%;
}

#magazine_dl {
    width: 100%;
}

#top_section .text {
    width: 80%;
    order: -1;
    margin-bottom: 20px;
    text-align: left;
    margin-left: 0;
}
#top_section .text p {
    display: none;
}

#top_section .image {
    width :90%;
}

/*IEズレ修正*/
.mobile-container {
  display :inherit;
  display: -webkit-flex;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-direction :column;
  height :400px;
}
.mobile-container .verb{
  order :-1;
}
#see .mobile-container {
 width :calc(40% - 10px);
 height :120%;
}  
#see .text-contaner {
  width :100%;
  margin-top :10%;
}
#see .image {
  width :calc(60% - 2px);
  height :100%;
}
#feel {
      align-items: flex-end;
  justify-content:space-around;
  -webkit-justify-content:space-around;
}

#feel .image {
  width :calc(48% - 2.5px);
  height :340px;
  margin :0;
  align-items: flex-start;
  flex-direction :column;
  
}
#feel .image .verb {
  display :inherit;
}
#feel .text-contaner {
  width :calc(30% - 2.5px);
}
#feel .text-contaner .verb {
  display :inherit;
}
.feel-container {
  width :calc(22% - 2.5px);

}
.feel-container .verb {
  display :none;
}
#feel2 {
  width :100%;
}
.desctop {
  display :none;
}
/*記事一覧のズレ修正*/
.img-background {
    height: 113px;
}
}/*endスマホ設定*/

img { /*SPズレ修正*/
    height :auto;
    max-height :auto;
}
@media only screen and (max-width: 360px) { /*記事一覧のズレ修正*/
    .img-background {
        height: 100px;
    }
}