@charset "utf-8";

.pc {
    display:block;
}

span.pc {
    display:inline-block;
}

.sp {
    display:none;
}

span.sp {
    display:none;
}

/*------------------------------------------------------------
  トップページ
------------------------------------------------------------*/

#main p {
  margin-bottom: 17px;
  color: #333;
  font-size: 2.8em;
  font-weight: bold;
}

#main .txtShin {
  margin: -5px 0 15px;
  color: #000;
}

#main p span {
  color: #cc0000;
}

#main .imgBox {
  margin-bottom: 27px;
}

#main .imgBox .photoBox {
  margin-top: -9px;
  padding-right: 10px;
  float: right;
  position: relative;
  z-index: 1;
}

#main .imgBox .textBox {
  width: 440px;
  float: left;
  position: relative;
}

#main .imgBox .textBox .text {
  margin: 65px 0 40px;
  line-height: 2.3;
  text-align: left;
  position: relative;
  z-index: 3;
}

#main .imgBox .textBox p {
  margin: 0;
  font-size: 1.3em;
  font-weight: normal;
  text-align: right;
}

#main .imgBox .textBox p span {
  margin-left: 15px;
  display: inline-block;
  color: #333;
  font-size: 1.4em;
}

#main .imgBox .textBox .pho {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

#main .photo {
    position:relative;
    top:0;
    left:0;
}

#main .photo .point01 {
}

#main .photo .point01 .title {
    background: linear-gradient(transparent 70%, #ffff00 0%);
    font-family: 'あずきフォント';
    display:inline-block;
    font-size:2.3em;
    font-weight:bold;
    position:absolute;
    top:40px;
    right:140px;
}

#main .photo .point01 .title span {
    color:#940350;
}

#main .photo .point01 .caption {
    display:block;
    font-size:1.3em;
    position:absolute;
    top:100px;
    right:130px;
    width:330px;
}

#main .photo .point02 {
}

#main .photo .point02 .title {
    background: linear-gradient(transparent 70%, #ffff00 0%);
    font-family: 'あずきフォント';
    display:inline-block;
    font-size:2.3em;
    font-weight:bold;
    position:absolute;
    top:210px;
    right:195px;
}

#main .photo .point02 .title span {
    color:#940350;
}

#main .photo .point02 .caption {
    display:block;
    font-size:1.3em;
    position:absolute;
    top:280px;
    right:50px;
    width:330px;
}

#main .photo .point03 {
}

#main .photo .point03 .title {
    background: linear-gradient(transparent 70%, #ffff00 0%);
    font-family: 'あずきフォント';
    display:inline-block;
    font-size:2.3em;
    font-weight:bold;
    position:absolute;
    top:410px;
    right:100px;
    transform: rotate( 9deg );
}

#main .photo .point03 .title span {
    color:#940350;
}

#main .photo .point03 .caption {
    display:block;
    font-size:1.3em;
    position:absolute;
    top:470px;
    right:30px;
    width:300px;
    transform: rotate( 9deg );
}

#main .compensate {
  margin-bottom: 50px;
  border-radius: 10px;
  background-color: #FFF;
  box-shadow: 3px 3px 5px #c2bcb3;
  position:relative;
  top:0;
  left:0;
}

#main .compensate .text {
    position:absolute;
    top:25px;
    left:50%;
    text-align:center;
    font-size:23px;
    font-weight:bold;
    width:315px;
    margin-left:-157.5px;
}

#main .compensate .text span {
    color:#91004f;
}

/* SmatPhones */
@media (max-width:979px) {

    .pc {
        display:none !important;
    }

    span.pc {
        display:none !important;
    }

    .sp {
        display:block;
    }

    span.sp {
        display:inline-block;
    }

    #gHeader {
        background-image: url("");
        display:block;
    }

    #gHeader .inner {
        width:95% !important;
        padding:0 !important;
        margin:20px auto;
    }

    #gHeader .inner .title {
        float:none;
        width:100%;
    }

    #gHeader .inner .title img {
        max-width:100%;
        display:block;
        margin:0 auto;
    }

    #gHeader .inner .area {
        display:none;
    }

    #main {
        padding-top:25px;
        padding-bottom:28px;
        width:90% !important;
        margin:0 auto;
    }

    #main .imgBox .photoBox {
        padding-right:0 !important;
        float:none !important;
    }

    #main .imgBox .textBox .pho {
        position:relative !important;
        top:20px;
    }

    #main .imgBox .textBox .text {
        margin-top:20px !important;
        margin-bottom:20px !important;
    }

    #main .imgBox .textBox {
        float:none !important;
        width:100% !important;
    }

    #main .compensate {
    }

    #main .compensate .text {
        top:15px;
        text-align:center;
        font-size:1.3em;
    }

}

/* iPhone6のみ */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) {

    .pc {
        display:none !important;
    }

    span.pc {
        display:none !important;
    }

    .sp {
        display:block;
    }

    span.sp {
        display:inline-block;
    }

    #gHeader {
        background-image: url("");
        display:block;
    }

    #gHeader .inner {
        width:95% !important;
        padding:0 !important;
        margin:20px auto;
    }

    #gHeader .inner .title {
        float:none;
        width:100%;
    }

    #gHeader .inner .title img {
        max-width:100%;
        display:block;
        margin:0 auto;
    }

    #gHeader .inner .area {
        display:none;
    }

    #main {
        padding-top:25px;
        padding-bottom:28px;
        width:90% !important;
        margin:0 auto;
    }

    #main .imgBox .photoBox {
        padding-right:0 !important;
        float:none !important;
    }

    #main .imgBox .textBox .pho {
        position:relative !important;
        top:20px;
    }

    #main .imgBox .textBox .text {
        margin-top:20px !important;
        margin-bottom:20px !important;
    }

    #main .imgBox .textBox {
        float:none !important;
        width:100% !important;
    }

    #main .compensate {
    }

    #main .compensate .text {
        top:15px;
        text-align:center;
        font-size:1.3em;
    }

}

/* iPhone6 Plus ~ ちょっと大きいスマホまで */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) {

    .pc {
        display:none !important;
    }

    span.pc {
        display:none !important;
    }

    .sp {
        display:block;
    }

    span.sp {
        display:inline-block;
    }

    #gHeader {
        background-image: url("");
        display:block;
    }

    #gHeader .inner {
        width:95% !important;
        padding:0 !important;
        margin:20px auto;
    }

    #gHeader .inner .title {
        float:none;
        width:100%;
    }

    #gHeader .inner .title img {
        max-width:100%;
        display:block;
        margin:0 auto;
    }

    #gHeader .inner .area {
        display:none;
    }

    #main {
        padding-top:25px;
        padding-bottom:28px;
        width:90% !important;
        margin:0 auto;
    }

    #main .imgBox .photoBox {
        padding-right:0 !important;
        float:none !important;
    }

    #main .imgBox .textBox .pho {
        position:relative !important;
        top:20px;
    }

    #main .imgBox .textBox .text {
        margin-top:20px !important;
        margin-bottom:20px !important;
    }

    #main .imgBox .textBox {
        float:none !important;
        width:100% !important;
    }

    #main .compensate {
    }

    #main .compensate .text {
        top:15px;
        text-align:center;
        font-size:1.3em;
    }

}