@charset "UTF-8";

/* -----
 * contents
----------------------------------------------------------------------------- */
/******フォント & カラー******/
.mainVisual,
.contentArea {
    color:  #5F6E4B;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    letter-spacing: .5em;
    line-height: 2;
    width: 100%;
}


.contentArea article h1 {
    font-family: serif;
}

@media screen and (max-width: 568px) {
    .mainVisual,
    .contentArea {
        letter-spacing: .1em;
    }
}

/******************** メインビジュアル ********************/
.mainVisual {
    margin-bottom: 60px;
    text-align: center;
    height: 690px;
    position: relative;
    overflow-x: hidden;
    background: #D2DA6A;
}

.mainVisual_content {
    position: relative;
    width: 1200px;
    height: 100%;
    margin: 0 auto;
}

.mainVisual h1 {
    position: absolute;
    top: 41px;
    left: 50px;
    transform: rotate(0);
    width: 250px;
    z-index: 10;
}

.mainVisual h2 {
    position: relative;
    margin: 0 auto;
    width: 55%;
}

.mainVisual h2 img {
    margin-top: -40px;
    padding-left: 10%;
    width: 100%;
}

.mainVisual .lead {
    position: relative;
    right: 0;
    font-size: 1.187rem;
    letter-spacing: .12em;
    line-height: 1.9;
    font-weight: 500;
    width: 70%;
    margin: 45px auto 50px;
    padding-left: 32px;
    text-align: left;
    color: #5F6E4B;
}

.mainVisual .lead p {
    padding: 0;
    margin: 0;
}

/** 写真 **/

.mainVisual .mainphoto_01 {
    position: absolute;
    top: 65px;
    left: -230px;
}

.mainVisual .mainphoto_02 {
    position: absolute;
    top: 30px;
    right: -160px;
}

@media screen and (max-width: 1600px) {


    /** 写真 **/
    
    .mainVisual .mainphoto_01,
    .mainVisual .mainphoto_02{
        width: 30%;
    }

    .mainVisual .mainphoto_01 {
        top: 50%;
        left: -80px;
        transform: translateY(-50%);
    }

    .mainVisual .mainphoto_02 {
        top: 50%;
        right: -60px;
        transform: translateY(-50%);
    }

}

@media screen and (max-width: 1199px) {

    .mainVisual_content {
        width: 100%;
    }

    .mainVisual h1 {
        top: 5.9%;
        left: 3%;
        width: 28%;
    }
    .mainVisual .lead {
        text-align: left;
        padding-left: 0;
        width: 65%;
        right: 0;
        left: 0;
        margin: 25px auto 50px;
        padding-left: 25px;
        text-align: center;
        color: #5F6E4B;
    }

    /** 写真 **/
    
    .mainVisual .mainphoto_01,
    .mainVisual .mainphoto_02{
        width: 25%;
    }

    .mainVisual .mainphoto_01 {
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .mainVisual .mainphoto_02 {
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
}

@media screen and (max-width: 1024px) {
    .mainVisual {
        height: 550px;
        width: 100%;
    }

    .mainVisual_content {
        width: 100%;
    }
    
    .mainVisual h1 {
        left: 3%;
        top: 40px;
        width: 250px;
    }
 
    .mainVisual .lead {
        margin-top: 20px;
        font-size: 0.9rem;
    }

    /** 写真 **/
    .mainVisual .mainphoto_01 {
        left: -10px;
    }

    .mainVisual .mainphoto_02 {
        right: -10px;
    }

}

@media screen and (max-width: 767px) {
    .mainVisual {
        text-align: center;
        height: 550px;
        overflow-x: hidden;
    }

    .mainVisual h1 {
        width: 25%;
    }

    .mainVisual h2 {
        position: relative;
        margin: 0 5% 0 auto;
        width: 65%;
    }
    
    .mainVisual h2 img {
        margin-top: -40px;
        padding-left: 10%;
        width: 100%;
    }

    .mainVisual .lead {
        text-align: left;
        width: 60%;
        margin: calc(12% + 50px ) auto 0 5%;
        padding-left: 0px;
    }

    /** 写真 **/
    
    .mainVisual .mainphoto_01,
    .mainVisual .mainphoto_02{
        width: 35%;
    }

    .mainVisual .mainphoto_01 {
        top: 45%;
        left: 2%;
    }
    .mainVisual .mainphoto_02 {
        top: 70%;
        right: 0;
    }
    
}

@media screen and (max-width: 568px) {

    .mainVisual {
        padding: 0;
        height: auto;
        background-size: 1000px;
        background-position: top center;
        padding-top: 5%;
    }

    .mainVisual h1 {
        position: relative;
        padding-top: 0;
        top: 0px;
        left: 0;
        margin: 0;
        margin-left: 5%;
        width: 30%;
        z-index: 1;
    }
    
    .mainVisual h2 {
        position: relative;
    }

    .mainVisual h2 {
        position: relative;
        margin: 0 11% 0 auto;
        width: 60%;
    }
    
    .mainVisual h2 img {
        margin-top: -100px;
        padding-left: 10%;
        width: 100%;
    }
   
    .mainVisual .lead {
        position: relative;
        font-size: 0.857rem;
        width: 75%;
        top: 0;
        right: 0;
        margin: 30px auto 30px 5%;
        text-align: left;
        letter-spacing: .4em;
        font-weight: bold;
    }

    .mainVisual .lead br {
        display: none;
    }

    /** 写真 **/
    
    .mainVisual .mainphoto_01,
    .mainVisual .mainphoto_02 {
        width: 25%;
        top: 50%;
    }

    .mainVisual .mainphoto_01 {
        top: 40%;
    }

    .mainVisual .mainphoto_02 {
        bottom: 5%;
        right: -3%;
    }

}

/******************** サムネイルエリア ********************/

ul.thumbArea{ 
    list-style-type:none;
    margin: 0 auto 100px;
    padding:0;
    width: 100%;
    background: url(../image/vol13/bg_thumb.png) repeat-x;
}

ul.thumbArea li{
    margin: 0 auto;
    width: auto;
    position: relative;
}

ul.thumbArea li img{
/**    width: auto;
    height: auto; **/
    width: 300px;
    padding: 10px 50px 0;
}

ul.thumbArea li span.new img{
    padding: 0;
    position: absolute;
    top: 4px;
    right: 50px;
    width: 50px;
    z-index: 9999;
    transform: rotate(-11deg);
    -webkit-animation:blink 0.9s ease-in-out infinite alternate;
    -moz-animation:blink 0.9s ease-in-out infinite alternate;
    animation:blink 0.9s ease-in-out infinite alternate;
}/** Newマークのアニメーションは本文のNewマークと共通。 **/

ul.thumbArea li span.new_right img{
    right: 0px;
}

@media screen and (max-width: 568px) {

    ul.thumbArea{ 
        margin: 0 auto 20px;
    }

    ul.thumbArea li img{
        padding: 0 20px;
    }

}

/******************** コンテンツ ********************/
.contentArea {
    background: #FFF;
    text-align: center;
}

.contentArea article {
    padding: 0 0 80px 0;
    width: 1200px;
    position: relative;
}

/**
.contentArea article::after {
    content: url(../image/vol13/bg_article.png);
    position: relative;
    display: block;
    padding-top: 100px;
}

.contentArea article:nth-child(odd)::after {
    transform: rotate(20deg);
}
.contentArea article:nth-child(even)::after {
    transform: rotate(-20deg);
}
**/

.contentArea article:nth-child(odd) {
    margin: 60px calc(37.5% - 450px) 60px auto;
}

.contentArea article:nth-child(even) {
    margin: 60px auto 60px calc(37.5% - 450px);
}

@media screen and (max-width: 1199px) {

    .contentArea article{
        width: 90%;
        margin: 0 auto;
    }

    .contentArea article:nth-child(odd),
    .contentArea article:nth-child(even) {
        margin: 60px auto;
    }

}

@media screen and (max-width: 568px) {

    .contentArea article{
        width: 100%;
    }

    .contentArea article:nth-child(odd),
    .contentArea article:nth-child(even) {
        margin: 30px auto;
    }

}

/** animation **/

/** ローカルコーディング中はコメントアウト　**/
.contentArea article:nth-child(odd) .box {
    opacity:  0;
    transform: translate(0, 50px);
}
.contentArea article:nth-child(even) .box {
    opacity:  0;
    transform: translate(0, 50px);
}
.contentArea article:nth-child(odd) .fadeIn{
    opacity: 1 !important;
    transition: 1.3s;
    transform: translate(0, 0);
}
.contentArea article:nth-child(even) .fadeIn{
    opacity: 1 !important;
    transition: 1.3s;
    transform: translate(0, 0);
}
/** ここまでコメントアウト　**/
/** /animation **/

/** 各記事の背景 **/
.contentArea article .box {
    width: 1080px;
    margin: 0 auto;
    text-align: left;
}

.contentArea article .box::after {
	display: block;
	clear: both;
	content: "";
}

@media screen and (max-width: 1079px) {

    .contentArea article .box {
        width: 100%;
        text-align: center;
    }

}

.contentArea article h1 {
    font-size: 1.9rem;
    font-weight: 200;
    letter-spacing: .3em;
    overflow: visible;
    text-align: left;
    transform: rotate(-3deg);
	color: #C9CAD6;
}

.contentArea article h1 span {
	padding: 0 .1em;
    height: auto;
    display: inline-block;
    line-height: 1.2;
    color: #5F6E4B;
    background-color: #D2DA6A;
}

.contentArea article h1 span:first-of-type {
    margin-right: 6em;
    margin-left: 1em;
}

.contentArea article h1 span:nth-of-type(2) {
    margin-left: 7em;
}

@media screen and (max-width: 750px) {

    .contentArea article h1 span {
        display: inline;
    }

    .contentArea article h1 span:first-of-type {
        margin-right: 0;
        margin-left: 0;
    }
    
    .contentArea article h1 span:nth-of-type(2) {
        margin-left: 0;
    }
    

}

@media screen and (max-width: 568px) {

    .contentArea article h1 {
        letter-spacing: .15em;
        margin: 0 5% 0;
    }
    
    .contentArea article h1 span {
        padding: .2em;
        position: relative;
        height: auto;
        text-indent: 0;
    }

}

/** アイコン NEW **/
.box .new {
    width: 60px;
    margin-right: .5em;
    display: inline-block;
    vertical-align: middle;
    transform: rotate(-11deg);
    -webkit-animation:blink 0.9s ease-in-out infinite alternate;
    -moz-animation:blink 0.9s ease-in-out infinite alternate;
    animation:blink 0.9s ease-in-out infinite alternate;
}

/** アイコン NEWのアニメーション **/
@-webkit-keyframes blink {
        0% {opacity:0;}
        100% {opacity:1;}
}
    @-moz-keyframes blink {
        0% {opacity:0;}
        100% {opacity:1;}
}
    @keyframes blink {
        0% {opacity:0;}
        100% {opacity:1;}
}
    
/** ショップ名 **/
.contentArea article h2 {
    font-size: 1.125rem;
    font-weight: bold;
    line-height: 1;
    margin: 40px 1em 0 150px;
    text-align: left;
    letter-spacing: .2em;
}

/** ショップの場所 **/
.contentArea article h2 span.floor {
    background: #C9CAD6;
    font-size: 70%;
    margin-right: .8em;
    padding: .3em .3em .3em .8em ;
    border-radius: 2px;
    color: #FFF;
}

/** 商品写真 **/
.contentArea article .photo {
    float: left;
    width: 450px;
    margin: 0 20px 0 150px;
    padding-top: 20px;
    position: relative;
}

.contentArea article .photo img {
    margin: 10px 0 0;
    width: 100%;
}

@media screen and (max-width: 1199px) {
    .contentArea article .photo {
        width: 400px;
        margin: 0 20px 0 150px;
    }

    .contentArea article h2 {
        margin: 40px 1em 0 150px;
    }
    
}

@media screen and (max-width: 1079px) {

    .contentArea article h2 {
        margin: 40px 20px;
    }

    .contentArea article .photo {
        margin: 0 20px;
    }

}

@media screen and (max-width: 767px) {

    .contentArea article .photo {
        float: none;
        width: 90%;
        max-width: 400px;
        margin: 0 5% 0 5%;
        padding-top: 0px;
        text-align: left;
        display: block;
    }

    .contentArea article .photo img {
        width: 100%;
    }

    .contentArea article .photo div {
        flex-basis: 65%;
    }

}

@media screen and (max-width: 568px) {

    .box .new {
        width: 50px;
    }

    .contentArea article .photo {
        width: 90%;
        max-width: 90%;
        margin: 0 5%;
        padding-top: 0px;
        display: block;  
    }

    .contentArea article .photo img {
        margin: 0 0 0;
    }

    .contentArea article h2 {
        margin: 20px 5% 10px;
        font-size: 1.0rem;
        font-weight: bold;
        line-height: 2.1;
    }

    .contentArea article h2 span + a {
        display: block;
    }
    
}

/********** 本文 **********/
.contentArea article section.text_area {
    float: left;
    text-align: left;
    width: 460px;
    padding-top: 20px;
}

.contentArea article section.text_area p.term {
    font-size: 0.9em;
    line-height: 2.1;
    letter-spacing: 0.1em;
    margin: 2.1em 0 0;
    padding: 0;
}


/** 商品名 **/
.contentArea article section.text_area h3 {
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.13em;
    margin: 0 0 12px 0;
    line-height: 1.4;
    text-align: center;
}

.contentArea article section.text_area h3 div {
    display: block;
}

.contentArea article section.text_area h3 div:last-of-type {
    margin-top: 0.5em;
}

.contentArea article section.text_area h3 div:first-of-type::after {
    content: '';
    background: url(../image/vol13/bg_h3.png) no-repeat;
    width: 50px;
    height: 50px;
    margin: 0.5em auto 0;
    display: block;
    background-size: contain;
}

.contentArea article section.text_area h3 .notice {
    font-size: 1.1rem;
}

/** 商品価格 **/
.contentArea article section.text_area h3 span.price {
    color: #FDBB4B;
    font-size: 1.0rem;
    padding-left: 1em;
    font-weight: normal;
    display: inline-block;
    white-space: nowrap;
    text-align: right;
}

.contentArea article section.text_area h3 .price strong {
    font-size: 1.4rem;
    font-style: italic;
    margin-right: 0.3em;
}

.contentArea article section.text_area h3 small {
    padding-right: 0.5em;
}

.contentArea article section.text_area h3 .combination {
    display: block;
    width: 100%;
    text-align: center;
}

/** 店舗＆商品説明文 **/
.contentArea article section.text_area .description {
    margin: 0;
    padding: .5em 0;
    line-height: 2.5;
    letter-spacing: .04em;
    font-size: 0.95rem;
}

.contentArea article section.text_area .description .notice {
    display: block;
}

/********** MORE　**********/
.contentArea article .info_area {
    clear: both;
}

.contentArea article .info_area.adphoto {
    display: flex;
    justify-content: flex-start; 
    flex-wrap: wrap;
    align-items:flex-end;
    margin: 60px auto 0 150px;
}

.contentArea article .info_area .morephoto {
    flex-basis: 30%;
    flex-shrink: 0;
}

.contentArea article .info_area .more  {  
    font-weight: normal;
    font-size: 0.9rem;
    letter-spacing: 0;
    margin: 20px auto 0;
    width: 70%;
    flex-basis: 70%;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.contentArea article .info_area .more h4 {
    text-align: center;
    margin: 10px auto;
    flex-shrink: 0;
    color: #ccf8ff;
    font-size: 1.125rem;
    letter-spacing: .1em;
    width: 100%;
}

.contentArea article .info_area .more dl {
    border: 2px solid #ccf8ff;
    padding: 0;
}

.contentArea article .info_area .more dl:nth-of-type(2) {
    border-left: none;
}

.contentArea article .info_area .more dl dt {
    text-align: center;
    color: #FFF;
    font-size: 1rem;
}

.contentArea article .info_area .more dl dt strong {
    font-weight: bold;
    font-size: 1.125rem;
}

.contentArea article .info_area .more dl dt.kori {
    background: linear-gradient(45deg, rgba(253, 137, 196,1) 40%,rgba(255, 234, 44,1) 100%);
}

.contentArea article .info_area .more dl dt.men{
    background: linear-gradient(45deg, rgba(131, 232, 255,1) 40%,rgba(255, 234, 44,1) 100%);
}

.contentArea article .info_area .more dl dd {
    margin: 0;
}

.contentArea article .info_area .more dl dd .notice {
    display: block;
    line-height: 1.3;
    font-size: .8em;
}

/** 麺orかき氷の種類 **/
.contentArea article .info_area dl.kind {
    width: 25%;
    flex-basis: 25%;
    margin: 0;
    text-align: center;
}

.contentArea article .info_area dl.kind dd strong {
    font-size: 4rem;
    padding: 0 .1em;
}

.contentArea article .info_area dl.another p.kind strong {
    font-size: 3rem;
    padding: 0 .1em;
}

/** 麺orかき氷もあるヨ・MORE **/
.contentArea article .info_area dl.another {
    width: 65%;
    flex-basis: 65%;
    margin: 0;
}

.contentArea article .info_area dl.another dd {
    display: flex;
    text-align: left;
    padding: 0 1em 1em 0;
}

.contentArea article .info_area dl.another dd p.kind {
    width: 30%;
    flex-basis: 30%;
    flex-shrink: 0;
    margin: 1em 5% 0 0;
    padding-top: 1em;
    text-align: center;
    line-height: 1;
    border-right: 4px dotted #ccf8ff;
    display: block;
}

.contentArea article .info_area dl.another ul {
    padding: 1em 20px 20px 50px;
}

.contentArea article .info_area dl.another ul li {
    padding: 0;
    margin: 0;
    border-radius: 3px;
    text-align: left;
    line-height: 1.8;
}

.contentArea article .info_area dl.another ul li.notice {
    padding-top: 1em;
}

.contentArea article .info_area dl.another strong {
    font-weight: bold;
    font-size: 1.1em;
}

.contentArea article .info_area dl.another .price {
    font-size: 0.9em;
    font-weight: bold;
    color: #FDBB4B;
}

.contentArea article .info_area dl.another .text {
    margin-top: 1em;
}

/** ショップ情報 **/
.contentArea article .information  {
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-align: left;
    margin: 1.2em auto 0;
}

.contentArea article .information dt::before {
    content: "●";
}

.contentArea article .information dt,
.contentArea article .information dd {
    display:  inline;
    margin: 0 0.5em 0 0;
}

.contentArea article .information dd .time {
    font-size: 0.9em;
    padding-left: 0.9em;
}

.contentArea article .information + .notice {
    font-size: 0.8rem;
    letter-spacing: .1em;
}

.contentArea article + .notice {
    font-size: 0.8rem;
    letter-spacing: .1em;
}

@media screen and (max-width: 1199px) {

    /***** MORE *****/
    .contentArea article .info_area dl.kind {
        width: 30%;
        flex-basis: 30%;
        margin: 0;
        text-align: center;
    }

    .contentArea article .info_area dl.another {
        width: 60%;
        flex-basis: 60%;
        margin: 0;
    }

}

@media screen and (max-width: 767px) {

    .contentArea article section.text_area {
        float: none;
        width: 70%;
        margin: 0 5% 0 25%;
    }

    /** MORE　**/
    .contentArea article .info_area.adphoto {
        margin: 60px auto 0 auto;
    }

    .contentArea article .info_area dl.kind {
        width: 12em;
        flex-basis: 12em;
    }

    .contentArea article .info_area dl.another {
        width: calc(100% - 12em);
        flex-basis: calc(100% - 12em);
    }

}

@media screen and (max-width: 568px) {

    .contentArea article section.text_area {
        width: 90%;
        margin: 0 5%;
    }

    .contentArea article section.text_area h3 {
        font-size: 1.125rem;
        font-weight: bold;
        letter-spacing: 0.1em;
    }

    .contentArea article section.text_area h3 .price {
        font-size: 0.9em;
    }

    .contentArea article section.text_area h3 .price strong {
        font-size: 1.1rem;
    }

    .contentArea article .info_area .morephoto {
        flex-basis: 25%;
        flex-shrink: 0;
    }

    /********** MORE　**********/

    .contentArea article .info_area {
        margin: 20px auto 0;
        width: 90%;
        position: relative;
    }

    .contentArea article .info_area.adphoto {
        display: block;
        margin: 20px auto 0 auto;
    }

    .contentArea article .info_area .morephoto {
        position: absolute;
        width: 30%;
        bottom: 12%;
        right: 5%;
    }

    .contentArea article .info_area .more  {  
        display: block;
        width: 100%;
    }

    .contentArea article .info_area.adphoto .more  {  
        flex-basis: 70%;
    }

    .contentArea article .info_area .more h4 {
        text-align: left;
        margin: 10px 5%;
    }

    .contentArea article .info_area .more dl {
        margin: 0 5%;
        padding: 0 0 1.5em;
    }

    .contentArea article .info_area .more dl:nth-of-type(2) {
        border: 2px solid #ccf8ff;
        border-top: none;
    }

    .contentArea article .info_area .more dl dt {
        font-size: 1rem;
        margin: 0;
        padding: 0;
        display: block;
    }

    .contentArea article .info_area .more dl dd {
        margin: 0;
        line-height: 1.0;
    }

    /** 麺orかき氷の種類 **/
    .contentArea article .info_area dl.kind {
        width: 100%;
        margin: 0;
        text-align: center;
    }

    .contentArea article .info_area dl.kind dd strong {
        font-size: 4rem;
        padding: 0 .1em;
    }

    /** 麺orかき氷もあるヨ・MORE **/
    .contentArea article .info_area dl.another {
        width: 100%;
        margin: 0;
    }

    .contentArea article .info_area dl.another dd {
        display: block;
        padding: 0;
    }

    .contentArea article .info_area.adphoto dl.another dd {
        width: 68%;
    }

    .contentArea article .info_area dl.another dd p.kind {
        width: 100%;
        flex-shrink: 0;
        margin: 1em 5% 0 0;
        padding-top: 0;
        border-right: none;
        display: block;
    }

    .contentArea article .info_area dl.another dd p.kind br {
        display: none;
    }

     .contentArea article .info_area dl.another ul {
        padding: 1em 20px 0;
        line-height: 1.9;
    }

    .contentArea article .info_area dl.another ul li {
        padding: 0;
        margin: 0;
        border-radius: 3px;
        text-align: left;
        line-height: 1.8;
        list-style: none;
    }

    .contentArea article .info_area dl.another strong {
        font-weight: bold;
        font-size: 1.1em;
    }

    .contentArea article .info_area dl.another .price {
        font-size: 0.9em;
        font-weight: bold;
        color: #FDBB4B;
    }

    .contentArea article .info_area dl.another .text {
        margin-top: 1em;
        padding: 0 5%;
        line-height: 1.9;
    }

    /** ショップ情報 **/
    .contentArea article .information  {
        width: 96%;
        font-size: 0.8125rem;
        letter-spacing: 0;
        margin: 1.2em 2% 0;
    }

    .contentArea article .information dt,
    .contentArea article .information dd {
        display:  inline;
        margin: 0 0.5em 0 0;
    }

    .contentArea article .information dd .time {
        font-size: 0.9em;
        padding-left: 0.9em;
    }

    .contentArea article .information + .notice {
        font-size: 0.8rem;
        letter-spacing: .1em;
    }

    .contentArea article + .notice {
        font-size: 0.8rem;
        letter-spacing: .1em;
    }

}