header {width:100%; max-width:1920px; height:560px; font-family:'Noto Sans Display', sans-serif; background:url("/wimage/back.png") 50% 50% no-repeat; background-size:cover;}

.visual {width:100%; height:100%; padding:1%;}

h1 {font-weight:700; font-size:72px; color:#00CC47; font-style:italic; text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.15);}

header .img {background:url("/wimage/arrow.png") 0 0 no-repeat; width:23px; height:12px; background-size:contain; filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.15));}

.head {display:flex; align-items:center; justify-content:space-between;}

.head .line {height:3px; background-color:#00cc47; width:78%; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15); border-radius:5px;}

header .messagebox {position:relative; width:100%; height:100%;}

header .messagebox div {position:absolute;}

header .messagebox .message {background:url("/wimage/message.png") 0 0 no-repeat; background-size:contain; height:168px; width:464px; top:13%; left:15%;}

header .messagebox .message span {position:absolute; top:50%; left:50%; transform:translate(-35%, -50%); color:#fff; font-weight:700; font-size:26px; width:380px; height:80px;}

header .messagebox .message2 {background:url("/wimage/message2.png") 0 0 no-repeat; background-size:contain; height:116px; width:321px; top:45%; right:35%;}

header .messagebox .message2 span {position:absolute; top:50%; left:35%; transform:translate(-35%, -50%); color:#fff; font-weight:700; font-size:18px; width:254px; height:54px;}


@media all and (max-width:1533px) {

    h1 {font-size:68px;}

    .head .line {width:68%;}
}

@media all and (max-width:1051px) {
    .head .line {width:57%;}
}

@media all and (max-width:749px) {

    header {background:url("/wimage/m_back.png") 0 0 no-repeat; background-size:cover; height:800px;}

    .visual {padding:10%;}

    h1 {color:#222; margin-bottom:30px;}

    header .img {background:url("/wimage/m_arrow.png") 0 0 no-repeat; background-size:cover;}

    .head {width:100%; display:inline-block; position:relative;}

    .head .line {background:#222; width:95%; position:absolute; bottom:3%; right:0;}
}

@media all and (max-width:595px) {

    header .messagebox .message {background:url("/wimage/message.png") 0 0 no-repeat; background-size:contain; height:41.584%; width:100%; top:10%; left:50%; transform:translateX(-50%); padding:10% 5%;}

    header .messagebox .message2 {background:url("/wimage/message.png") 0 0 no-repeat; background-size:contain; height:41.584%; width:100%; top:40%; right:0; left:50%; transform:translateX(-50%); padding:10% 5%;}

    header .messagebox .message span, header .messagebox .message2 span {position:static; font-size:26px; width:100%; height:auto;}

    .head .line {width:85%;}

}

@media all and (max-width:535px) {

    header .messagebox .message, header .messagebox .message2 {padding:10%;}

    header .messagebox .message span, header .messagebox .message2 span {font-size:22px;}
}

@media all and (max-width:491px) {
    header .messagebox .message span, header .messagebox .message2 span {font-size:19px;}
}

@media all and (max-width:427px) {

    header {height:650px;}

    header .messagebox .message, header .messagebox .message2 {padding:10% 5%;}

    header .messagebox .message2 {top:45%;}
}

@media all and (max-width:389px) {

    header {height:550px;}

    header .messagebox .message span, header .messagebox .message2 span {font-size:17px;}
}

@media all and (max-width:359px) {

    h1 {font-size:56px;}

    header .messagebox .message span, header .messagebox .message2 span {font-size:16px;}
}

@media all and (max-width:337px) {

    header .messagebox .message, header .messagebox .message2 {padding:10%;}

    header .messagebox .message span, header .messagebox .message2 span {font-size:14px;}
}

@media all and (max-width:321px) {

    header .messagebox .message, header .messagebox .message2 {padding:7%;}

    header .messagebox .message2 {top:35%;}
}

@media all and (max-width:301px) {

    h1 {font-size:48px;}
    
    header .messagebox .message span, header .messagebox .message2 span {font-size:12px;}
}