@charset "UTF-8";


/*===============================================
●共通
===============================================*/

    

/*===============================================
●画面の横幅が641px以上(タブレット・PC)
===============================================*/
@media screen and (min-width: 641px) {

/* !サブページ　タイトル */
    #sub-page-title > h1 > img {
        width: 141px;
    }
    

/* box01 */
    #box01 {
        width: 960px;
        margin:100px auto 0 auto;
        text-align:center;
    }
    
    #box01 > div > div:nth-of-type(1) {
        float: right;
        width: 885px;
        height: 500px;
        margin: 0;
        text-align: left;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        -webkit-text-orientation: upright;
        text-orientation: upright;
    }
    
    #box01 > div > div:nth-of-type(2) {
        float: left;
        width: 75px;
        margin: 0;
        padding: 250px 0 0 0;
    }
    
    #box01 > div > div:nth-of-type(2) img {
        width: 75px;
    }
    

/* box02 */
    #box02 {
        width: 960px;
        margin:110px auto 120px auto;
        padding: 100px 0 0 0;
        text-align:center;
        border-top: #cccccc 1px solid;
    }
    
    #box02 > div > div:nth-of-type(1) {
        width: 75px;
        margin: 30px 100px 0 0;
    }
    
    #box02 > div > div:nth-of-type(1) img {
        width: 75px;
    }
    
    #box02 > div > div:nth-of-type(2) {
        width: 455px;
        margin: 0 30px 0 0;
    }
    
    #box02 > div > div:nth-of-type(2) > p {
        width: 455px;
        margin: 0;
        text-align: left;
        border-bottom: #cccccc 1px solid;
    }
    
    #box02 > div > div:nth-of-type(2) > p > span:nth-of-type(1) {
        display: inline-block;
        width: 95px;
        padding: 18px 0 16px 0;
        color: #b09a4d;
        vertical-align: top;
    }
    
    #box02 > div > div:nth-of-type(2) > p > span:nth-of-type(2) {
        display: inline-block;
        width: 360px;
        padding: 18px 0 16px 0;
        vertical-align: top;
    }
    
    #box02 > div > div:nth-of-type(3) {
        width: 300px;
        margin: 20px 0 0 0;
    }
    
    #box02 > div > div:nth-of-type(3) img {
        width: 300px;
    }
    
    #box02 > a {
        display: block;
        width: 560px;
        margin: 80px auto 0 auto;
    }
    
    #box02 > a > img {
        width: 560px;
    }
    
    #box02 > a > img:hover {
        opacity: 0.6;
        filter: alpha(opacity=60);
        -ms-filter: "alpha(opacity=60)";
        transition: opacity 0.5s ease;
    }
    
}

/*===============================================
●画面の横幅が640px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 640px) {	

/* !サブページ　タイトル */
    #sub-page-title > h1 > img {
        width: 101px;
    }
    
    
/* box01 */
    #box01 {
        width:100%;
        margin:35px auto 0 auto;
        text-align:center;
    }
    
    #box01 > div > div:nth-of-type(1) {
        width: 90%;
        margin: 0 auto;
        text-align: left;
    }
    
    #box01 > div > div:nth-of-type(2) {
        width: 90%;
        margin: 20px auto 0 auto;
        text-align: right;
    }
    
    #box01 > div > div:nth-of-type(2) img {
        width: 65px;
    }


/* box02 */
    #box02 {
        width:100%;
        margin:35px auto 50px auto;
        text-align:center;
    }
    
    #box02 > img {
        width:100%;
    }
    
    #box02 > div > div:nth-of-type(1) {
        width:100%;
        margin:35px auto 0 auto;
    }
    
    #box02 > div > div:nth-of-type(1) > img {
        width:80px;
    }
    
    #box02 > div > div:nth-of-type(2) {
        width:90%;
        margin:30px auto 0 auto;
    }
    
    #box02 > div > div:nth-of-type(2) > p {
        width:100%;
        margin: 0;
        text-align: left;
    }
    
    #box02 > div > div:nth-of-type(2) > p > span:nth-of-type(1) {
        display: block;
        width:100%;
        padding: 10px 0 0 0;
        color: #b09a4d;
    }
    
    #box02 > div > div:nth-of-type(2) > p > span:nth-of-type(2) {
        display: block;
        width:100%;
        padding: 0 0 10px 0;
        border-bottom: #cccccc 1px solid;
    }
    
    #box02 > a {
        display: block;
        width: 280px;
        margin: 40px auto 0 auto;
    }
    
    #box02 > a > img {
        width: 280px;
    }

    
}