/*-------------------------------------------以下初期タグ設定------------------------------------------------------------*/
/* reset css */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}



/* web catalog setting */
html {
    font-size: 62.5%;
}

body {
    width: 100%;
    font-size: 1.6rem;
    font-size: 16px;
    background-repeat: no-repeat;
    background-position: top right,bottom left;
    background: #fffff0;
    background-size: contain;
    /*
    background-image:url(../newimg/katarogu_shita.png);
    background-position: bottom 0px left;*/
}


img {
    width: 100%;
    vertical-align: bottom;
}

p {
    line-height: 1.5;
    color: #3e2e28;
}

a {
    /*display: inline-block;*/
    transition: .4s;
}

a:hover {
    opacity: 0.6;
}

br.sp-only {
    display: none;
}

/*-------------------------------------------初期タグ設定ここまで------------------------------------------------------------*/

/* PC : 1080px / SP : 750px */;
.sitebox {
    width : 1000px;
    margin :  0 auto;
}

.title {
    width : 100%;
}

.A-BG {
    background-image: url("../img/bg.png");
    background-size : contain;
}

.A-Box {
    padding-top : 100px;
    width : 700px;
    margin :  0 auto ;
}

.A-Box .A-sub01 {
    position: relative;
    left :  10% ;
    width : 80%;
    margin-top : 20%;
}

.A-Box .A-sub02 {
    position: relative;
    left :  0% ;
    width : 50%;
    margin-top : -30%;
}

.A-Box .A-1 {
    position: relative;
    margin-top : -135%;
    left: 20%;
    width : 80%;
    margin-bottom : 50%;
}

.A-Box .A-sub03 {
    position: relative;
    left :  20% ;
    width : 70%;
}

.A-Box .A-sub04 {
    position: relative;
    left :  40% ;
    width : 60%;
    margin-top : -20%;
}

.A-Box .A-2 {
    position :  relative ;
    left: 10% ;
    width : 65%;
    margin-top : -105%;
    margin-bottom : 30%;
}

.A-Box .credit {
    position : relative ;
    width : 100%;
    margin-top : 10% ;
    padding-bottom : 10%;
}

.B-BG {
    background-image: url("../img/2b-bg.png");
    background-size: cover;
    width: 100%;
}

.B-Box {
    padding-top : 100px;
    width : 700px;
    margin :  0 auto ;
}

.B-Box .B-1 {
    margin-top: 70%;
    position: relative;
    left: 25%;
    width : 75%;
}

.B-Box .B-2 {
    position: relative;
    width : 55%;
    left: 0%;
    margin-top : -180%;
    margin-bottom : 110%;
}

.B-Box .credit {
    position : relative ;
    width : 100%;
    margin-top : 10% ;
    padding-bottom : 10%;
}

.C-BG {
    background: #999 url("../img/2c-bg.png");
    background-size: cover;
}

.C-Box {
    padding-top : 50px;
    padding-bottom : 50px;
    width : 700px;
    margin :  0 auto ;
}

.C-Box .C-1 {
    position: relative;
    width : 100%;
}

.C-Box .credit {
    position : relative ;
    width : 100%;
    margin-top : 10% ;
    padding-bottom : 10%;
}

.D-BG {
    background-image: url("../img/2d-bg.png");
    background-size: cover;
}

.D-Box {
    padding-top : 100px;
    width : 700px;
    margin :  0 auto ;
}

.D-Box .D-1 {
    position: relative;
    margin-top: 5%;
    width : 100%;
    margin-bottom : 5%;
}

.D-Box .D-2 {
    position: relative;
    margin-top: 10%;
    width : 90%;
    margin-bottom : 10%;
}

.D-Box .D-3 {
    position: relative;
    margin-top: 10%;
    left: 20%;
    width : 80%;
    margin-bottom : 10%;
}

.D-Box .credit {
    position : relative ;
    width : 100%;
    margin-top : 50px ;
    padding-bottom : 50px;
}

.bg {
    background-image: url("../img/bg.png");
    background-size : cover;
}

.snsicon-Box {
    padding-top : 50px;
    width : 700px;
    margin :  0 auto ;
}

.igicon{
    position: relative;
    text-align :  center;
    width :  30%;
    margin :  0 auto;
}

.ios{
    position: relative;
    width :  40%;
    left: 8%;
}

.android{
    position: relative;
    width :  45%;
    left: 52%;
    margin-top: -13.5%;
}

.staffcredit {
    position : relative ;
    width : 50%;
    margin : 100px auto 0px auto ;
    padding-bottom : 50px;
}

.footer-Box {
    width: 100%;
    display: flex;
    /* 直下要素を並列にする */
    flex-wrap: wrap;
    /* flex itemを複数行に折り返して良いか単一行にするか */
    /* wrapは複数行に分割する */
    height : auto;
}

.footer-1 {
    width: 100% ;
    /*←画像を横に2つ並べる場合*/
    height :  auto;
}

.footer-2 {
    width: calc(100% / 2);
    /*←画像を横に2つ並べる場合*/
    height :  100%;
}

.footer-3 {
    width: calc(100% / 2);
    /*←画像を横に2つ並べる場合*/
    height :  100%;
}

.footer-1 img {
    min-width :  100%;
    /*画像のはみだしを防ぐ*/
    /*画像の縦横比を維持 */
    /*border: solid 1px #ccc;*/
    /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}

/*
.footer-1 {
    width: calc(100%/3) ;
}

.footer-2 {
    width: calc(100%/3) ;
}

.footer-3 {
    width: calc(100%/3) ;
}
*/


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

    body {
        font-size: 1.0rem;
        font-size: 10px;
        background-size: contain;
    }

 /* PC : 1080px / SP : 750px */;
.sitebox {
    width : 350px;
    margin :  0 auto;
}

.title {
    width : 100%;
}

.A-Box {
    padding-top : 30px;
    width : 100%;
    margin :  0 auto ;
}

.A-BG {
    background-image: url("../img/bg.png");
    background-size : contain;
}

.A-Box .A-sub01 {
    position: relative;
    left :  10% ;
    width : 80%;
    margin-top : 20%;
}

.A-Box .A-sub02 {
    position: relative;
    left :  0% ;
    width : 50%;
    margin-top : -30%;
}

.A-Box .A-1 {
    position: relative;
    margin-top : -135%;
    left: 20%;
    width : 80%;
    margin-bottom : 50%;
}

.A-Box .A-sub03 {
    position: relative;
    left :  20% ;
    width : 70%;
}

.A-Box .A-sub04 {
    position: relative;
    left :  40% ;
    width : 60%;
    margin-top : -20%;
}

.A-Box .A-2 {
    position :  relative ;
    left: 10% ;
    width : 65%;
    margin-top : -105%;
    margin-bottom : 30%;
}

.A-Box .credit {
    position : relative ;
    width : 95%;
    margin-top : 10% ;
    padding-bottom : 10%;
}

.B-BG {
    background-image: url("../img/2b-bg.png");
    background-size: contain;
    width: 100%;
}

.B-Box {
    padding-top : 30px;
    width : 100%;
    margin :  0 auto ;
}

.B-Box .B-1 {
    margin-top: 70%;
    position: relative;
    left: 25%;
    width : 75%;
}

.B-Box .B-2 {
    position: relative;
    width : 55%;
    left: 5%;
    margin-top : -180%;
    margin-bottom : 110%;
}

.B-Box .credit {
    position : relative ;
    width : 95%;
    margin-top : 10% ;
    padding-bottom : 10%;
}

.C-BG {
    background: #999 url("../img/2c-bg.png");
}

.C-Box {
    padding-top : 30px;
    padding-bottom : 30px;
    width : 100%;
    margin :  0 auto ;
}

.C-Box .C-1 {
    position: relative;
    width : 90%;
    margin :  0 auto;
}

.C-Box .credit {
    position : relative ;
    width : 95%;
    margin-top : 10% ;
    padding-bottom : 10%;
}

.D-BG {
    background-image: url("../img/2d-bg.png");
    background-size: cover;
}

.D-Box {
    padding-top : 30px;
    width : 100%;
    margin :  0 auto ;
}

.D-Box .D-1 {
    position: relative;
    margin-top: 5%;
    width : 100%;
    margin-bottom : 5%;
}

.D-Box .D-2 {
    position: relative;
    margin-top: 10%;
    width : 90%;
    margin-bottom : 10%;
}

.D-Box .D-3 {
    position: relative;
    margin-top: 10%;
    left: 20%;
    width : 80%;
    margin-bottom : 10%;
}

.D-Box .credit {
    position : relative ;
    width : 95%;
    margin-top : 50px ;
    padding-bottom : 50px;
}

.bg {
    background-image: url("../img/bg.png");
    background-size : cover;
}

.snsicon-Box {
    padding-top : 30px;
    width : 100%;
    margin :  0 auto ;
}

.igicon{
    position: relative;
    width : 15%;
    margin: 0 auto
}

.ios{
    position: relative;
    width :  35%;
    left: 13%;
}

.android{
    position: relative;
    width :  40%;
    left: 52%;
    margin-top: -12%;
}

.staffcredit {
    position : relative ;
    width : 90%;
    margin : 30px auto 0px auto ;
    padding-bottom : 10px;
}

.footer-Box {
    background-image: url("../img/bg.png");
    background-size : cover;
    width: 100%;
    display: flex;
    /* 直下要素を並列にする */
    flex-wrap: wrap;
    /* flex itemを複数行に折り返して良いか単一行にするか */
    /* wrapは複数行に分割する */
    padding : 30px 0 0 0 ;
}

.footer-Box li {
    width: calc(100%/3) ;
    margin :  0 auto ;
    /*←画像を横に2つ並べる場合*/
    list-style: none;
}

.footer-Box li img {
    max-width: 100%;
    /*画像のはみだしを防ぐ*/
    height: auto;
    /*画像の縦横比を維持 */
    /*border: solid 1px #ccc;*/
    /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}

/*
.footer-1 {
    width: calc(100%/3) ;
}

.footer-2 {
    width: calc(100%/3) ;
}

.footer-3 {
    width: calc(100%/3) ;
}
*/