/*-------------------------------------------以下初期タグ設定------------------------------------------------------------*/
/* 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/a-bg.png");
    background-size : contain;
}

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

.A-Box .A-sub02 {
    position: relative;
    top :  100px;
    left: 500px;
    width : 200px;
}

.A-Box .A-1 {
    position: relative;
    margin-top :  -230px;
    width : 550px;
    margin-bottom : 20px;
}

.A-Box .A-2 {
    position :  relative ;
    left: 250px ;
    width : 450px;
    margin-bottom : 30px;
}

.A-Box .A-sub04 {
    position: relative;
    left :  120px ;
    width : 35%;
    margin-top : -300px;
    margin-bottom : 70px;
}

.A-Box .A-sub03 {
    position: relative;
    width : 25%;
    margin-bottom :  -100px;
}

.A-Box .A-3 {
    position :  relative ;
    width : 70%;
    margin : 0 auto ;
}

.A-Box .A-4 {
    margin-top : 100px;
    width : 340px;
}

.A-Box .A-5 {
    position : relative ;
    left : 360px;
    width : 340px;
    margin-top : -320px;
}

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

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

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

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

.B-Box .B-1 {
    position: relative;
    width : 550px;
    margin-bottom : 30px;
}

.B-Box .B-2 {
    position: relative;
    width : 370px;
    left: 330px;
    margin-bottom : 30px;
}

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

.C-BG {
    background: #999 url("../img/a-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%;
}

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

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

.D-Box .D-sub01 {
    position: relative;
    left: 400px;
    width : 300px;
    margin-bottom : 30px;
}

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

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

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

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

.E-Box .E-1 {
    position: relative;
    margin-top: -50px;
    left: 5%;
    width : 95%;
    margin-bottom : 30px;
}

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

.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-BG {
    background-image: url("../img/a-bg.png");
    background-size : contain;
}

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

.A-Box .A-sub02 {
    position: relative;
    top :  70px;
    left: 71% ;
    width : 29%;
}

.A-Box .A-1 {
    position: relative;
    margin-top :  -25%;
    left: 5%;
    width : 80%;
    margin-bottom : 20px;
}

.A-Box .A-2 {
    position :  relative ;
    left: 30% ;
    width : 70%;
    margin-bottom : 30px;
}

.A-Box .A-sub04 {
    position: relative;
    left : 15% ;
    width : 45%;
    margin-top : -200px;
    margin-bottom : 70px;
}

.A-Box .A-sub03 {
    position: relative;
    width : 25%;
    margin-bottom :  -100px;
}

.A-Box .A-3 {
    position :  relative ;
    width : 70%;
    margin : 30px auto 0 auto;
}

.A-Box .A-4 {
    margin-top : 30px;
    width : 50%;
}

.A-Box .A-5 {
    position : relative ;
    left : 55%;
    width : 45%;
    margin-top : -42%;
}

.A-Box .credit {
    position : relative ;
    width : 90%;
    margin : 30px auto 0 auto;
}

.A-Box .A-6 {
    position : relative ;
    width : 100%;
    margin : 30px auto 0px auto ;
    padding-bottom: 30px;
}

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

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

.B-Box .B-1 {
    position: relative;
    width : 75%;
    margin : 0 0 30px 10px;
}

.B-Box .B-2 {
    position: relative;
    width : 55%;
    left: 42%;
    margin-bottom : 30px;
}

.B-Box .credit {
    position : relative ;
    width : 90%;
    margin : 30px auto 0 auto;
}

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

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

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

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

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

.D-Box .D-sub01 {
    position: relative;
    left: 50%;
    width : 50%;
    margin-bottom : 30px;
}

.D-Box .D-1 {
    position: relative;
    width : 95%;
    margin : -50px auto 30px auto;
}

.D-Box .credit {
    position : relative ;
    width : 90%;
    margin : 0 auto;
}

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

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

.E-Box .E-1 {
    position: relative;
    width : 90%;
    margin: 30px auto 30px auto;
}

.E-Box .credit {
    position : relative ;
    width : 90%;
    margin :  0 auto 30px auto;
}

.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 {
    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) ;
}
*/