@charset "UTF-8";
/*
Theme Name: Dana Asia Japan
Version: 1.0
Author: Dana Asia Japan
*/

.zen-kaku-gothic-new-medium {
  font-family: "Zen Kaku Gothic New", serif;
  font-weight: 500;
  font-style: normal;
}
.zen-kaku-gothic-new-bold {
  font-family: "Zen Kaku Gothic New", serif;
  font-weight: 700;
  font-style: normal;
}
.host-grotesk-<uniquifier> {
  font-family: "Host Grotesk", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

body {
	font-family: "Zen Kaku Gothic New", serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.6;
	padding: 0;
	margin: 0;
}

@media (min-width: 768px) {
	body {font-size: 18px; line-height: 1.8}
	
}


a {color: #000;}
a:hover {color: #de3a12; transition: 0.5s;}
a::after {color: #000;}
a:visited {color: #000;}

li {padding-left: 0;margin-left: 0;}
figure {margin: 0; padding: 0;}

p {text-align: justify;}

.en {font-family: "Host Grotesk", serif; font-weight: 800;}

.br_sp {display: block;}
.br_pc {display: none;}

@media (min-width: 768px) {
	.br_sp {display: none;}
	.br_pc {display: block;}
}


/*-------------------------------------------------------  header*/

header {margin: 0 auto; padding: 10px 15px 0; display: flex; flex-wrap: wrap; align-items: center;}
header a {text-decoration: none;}
header a:hover {color: #de3a12; transition: 0.5s;}
header .logo {width: 170px; height: auto;}
header h1 {display: block; width: 50%; margin: 12px 0 6px;}

header .nav {display: block; width: 48%;}
header .nav .nav_list {display: flex; justify-content: flex-end;}
header .nav .nav_list .lang {margin-right: 20px; padding-top: 4px;}
header .nav .nav_list .mail img {width: 35px; height: auto;}

.active {font-weight: bold; color: #ef5223;}
.mail a:hover {opacity: 0.8;}

@media (min-width: 768px) {
	
	header {max-width: 1170px;}
	header h1 {margin: 24px 0 12px;}
	header .nav .nav_list .lang {margin-right: 40px;}
	header .nav .nav_list .mail img {width: 40px; height: auto;}

}

.keyvisual { height: 300px; position: relative;}
.movie { background: url(https://danaasia.jp/img/danabg.jpg) no-repeat center center; background-size: cover; height: inherit; position: relative; overflow: hidden;}
.movie__video { object-fit: cover; height: 100%;width: 100%;}

@media (min-width: 768px) {

	.keyvisual { height: 450px; position: relative;}
	
}


/*-------------------------------------------------------  main*/
		
.boxshadow {box-shadow: 0px 0px 15px -5px #c7c7c7; border-radius: 10px;}

.about {position: relative; background: #FFF; margin: -60px auto 30px; padding: 20px 0 30px; width: 90%;}
.about_left {padding: 0 10px 0 30px;}
.about_right {padding: 0 15px 0 30px;}

.icon {position: absolute; top: 20px; right: 20px; width: 50px; height: auto;}
.about h1 {line-height: 1; margin-bottom: 40px; padding-top: 30px; font-size: 24px;}
.about .subtitle {font-size: 15px;}
.about h2 {margin-bottom: 30px; line-height: 1;}
.title {padding: 0.25em 0.5em; border-left: solid 5px #ef5223;}
.about p {letter-spacing: 2px;}

@media (min-width: 768px) {
	.about {display: flex; flex-wrap: wrap; max-width: 1170px; /*width: 90%;*/ align-items: center; padding: 50px 0 60px;}
	.about_left {width: 18%; padding: 0 2% 0 4%;}
	.about_right {width: 62%; padding: 0 8% 0 4%;}
	.about_right p {padding-left: 3%;}
}


.work {margin-bottom: 60px;}
.work_list {width: 90%; margin: 0 auto 10px;}
.work_list figure img {border-radius: 10px 10px 0 0;}
.work_list h2 {text-align: center; font-size: 21px; margin-bottom: 0; padding-bottom: 0;}
.work_list p {padding: 0 40px 30px; font-size: 15px; color: #4d4d4d; margin-top: 10px;}

@media (min-width: 768px) {
	
	.work {display: flex; justify-content: space-between;　flex-wrap: wrap; max-width: 1200px; width: 94%; margin: 0 auto 80px;}
	.work div {background: #FFF; width: 31%;}
	.work_list p {font-size: 16px;}
}


.bg_1 {background: #f8f8f8;}
.role_text {padding: 40px 20px 30px;}
.role_title {padding: 0.25em 0.5em; border-left: solid 5px #ef5223;}
.role p {padding: 0 20px 15px 20px;}
.role_icon {width: 180px; height: auto; margin: 0 auto;}
.role_list {padding-bottom: 60px;}
.role_icon_mini {width: 55px; height: auto; margin: 0 auto; padding-top: 40px;}

@media (min-width: 768px) {
	
	.role_text {max-width: 1170px; margin: 0 auto; padding: 80px 50px 60px;}
	.role {display: flex; align-items: center;}
	.role .role_left {width: 70%; line-height: 2;}
	.role .role_right {width: 30%;}
	.role_list {display: flex; flex-wrap: wrap; max-width: 1170px; margin: 0 auto 60px; padding: 0 50px 80px;}
	.role_list div {width: 32%; margin-right: 2%; background: #FFF;}
	.role_list div:last-child {margin-right: 0;}
}

.step_logo {text-align: center; padding-top: 60px;}
.step_logo img {width: 160px;}
.steps {padding-bottom: 60px;}
.steps h2 {text-align: center; color: #0b4670;}
.steps h2 span {color: #ef5223; font-size: 15px;}
.steps h3 {text-align: center; color: #0b4670;}
.steps ul {padding-bottom: 30px;}
.steps li {font-size: 14px; padding-right: 15px;}
.focus {color: #ef5223;}

@media (min-width: 768px) {
	.step_list {display: flex; flex-wrap: wrap; max-width: 1170px; margin: 0 auto 60px; padding: 0 50px 0;}
	.step_list div {width: 32%; margin-right: 2%;}
	.step_list div:last-child {margin-right: 0;}
	.steps h2 {font-size: 30px; margin-bottom: 50px}
	.steps h2 span {color: #ef5223; font-size: 20px;}
	.steps h3 {text-align: center; color: #0b4670;}
	.steps ul {padding-bottom: 30px;}
	.steps li {font-size: 16px; padding-right: 15px;}
}


.ask p {margin-bottom: 30px;}
.ask {padding: 60px 30px 40px;}
.ask_contact {font-size: 18px;}
.ask_contact a {text-decoration: none;}
.ask_contact span {background: #ef5223; color: #FFF; padding: 5px 12px; border-radius: 5px;}
.ask figure img {padding: 0; margin: 0;}
figure img { max-width: 100%; vertical-align: bottom;}

@media (min-width: 768px) {
	
	.ask_box {max-width: 1170px; margin: 0 auto; display: flex; align-items: flex-end;}
	.ask {width: 75%; margin-right: 4%;}
	.ask h2 {padding-top: 10px; font-size: 30px}
	.ask p {margin-bottom: 50px;}
	.ask_contact {padding-bottom: 60px; font-size: 21px;}
	
}

.partner {padding: 60px 15px 10px;}
.partner h3 {text-align: center;}
.partners {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around;}
.partners>div {width: 25%; padding: 15px;}
.cycle {background-image: url('https://danaasia.org/wp-content/uploads/2024/07/plastic-waste-ocean72.webp');background-size: cover; background-position: center center; background-attachment: scroll; background-repeat: no-repeat;}

@media (min-width: 768px) {
	.partners {max-width: 900px; margin: 0 auto 50px;}
			.partner h3 {font-size: 21px; margin-bottom: 60px}
			.partners>div {width: 15%; padding: 15px;}
	
}

.cycle_text {opacity: 0.85; background: linear-gradient(268deg, rgb(243, 251, 255) 0%, rgb(252, 254, 255) 100%); padding-bottom: 50px;}
.cycle_text h2 {color: #e1520c; font-size: 40px; line-height: 1; padding: 50px 25px 0; margin-bottom: 10px;}
.cycle_text h3 {padding: 0 25px; margin-top: 0;}
.cycle_text p {padding: 10px 26px;}
.cycle_text figure {width: 90%; margin: 0 auto;}


@media (min-width: 768px) {
	.cycle_inner {max-width: 1170px; margin: 0 auto; display: flex; align-items: flex-start;}
	.cycle_inner_left {width: 50%;}
	.cycle_inner_right {width: 50%;}
	.cycle h2 {font-size: 60px;}
	.cycle h3 {font-size: 21px;}
	.cycle p {line-height: 2; padding-right: 120px;}
	.cycle_map {padding-top: 100px; padding-bottom: 20px;}
}



/*-------------------------------------------------------  footer*/

.footer {padding: 60px 25px 40px;}
footer {background: #f8f8f8;}
.footer_logo {width: 150px; margin: 0 0 0 auto;}
footer h1 {font-size: 24px; margin-top: 60px;}
.footer h2 {font-size: 16px; margin-top: 30px;}
footer .japan {border-bottom: 1px solid #A6A6A6; margin-bottom: 30px; padding-bottom: 20px;}
footer dt {font-weight: bold; font-size: 18px;}
footer dd {margin-left: 0; margin-bottom: 20px}
.link-none {pointer-events: none; text-decoration: none;}
.copyright {text-align: center;}

@media (min-width: 768px) {
	.footer {max-width: 1100px; margin: 0 auto 20px;}
	footer .japan {border-bottom: none;}
	.footer h1 {margin-bottom: 40px; font-size: 28px;}
	.footer h2 {font-size: 18px;}
	.company {display: flex; flex-wrap: wrap;}
	.company .japan {width: 70%;}
	.company .abroad {width: 30%; padding-top: 10px;}
}

	.contactform {background: #0e3d65; color: #FFF; padding: 20px; } /* Added padding for better spacing */
	.contactform .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        max-width: 1250px; /* Set your desired maximum width */
        margin: 0 auto; /* This centers the block element */
    } /* Use flexbox for layout */
	.contactform .formbox {flex: 1 1 50%; min-width: 300px; margin-right: 20px;} /* Form takes roughly 50% width */
	.contactform .contact-details {flex: 1 1 40%; min-width: 250px; margin-top: 30px;} /* Contact details take roughly 45% width */
	.contactform .contact-details dl {margin-bottom: 15px;}
	.contactform .contact-details dt {font-weight: bold; margin-top: 10px;}
	.contactform .contact-details a {color: #FFF; text-decoration: underline;}
	.contactform .copyright {margin-top: 20px; text-align: center; width: 100%;} /* Center copyright and give it full width */

    /* Basic responsive adjustments */
    @media (max-width: 768px) {
		.contactform .contact-details {margin: -40px auto auto auto;} 
        .contactform .container {flex-direction: column;}
        .contactform .formbox {margin-right: 0; margin-bottom: 0px;}
    }


/*-------------------------------------------------------  Form*/

.formbox {max-width: 900px; padding: 30px 20px; margin: 0 auto;}
.contactform h2 {text-align: left; padding-top: 20px;}

#cf7-area {width: 100%; margin: 0 auto;}

.cf7-item { display: flex; align-items: flex-start; justify-content: flex-start; margin: 0 0 1.75em;}
.cf7-q { width: 30%; margin: 0 0 0 10px;}
.cf7-a { width: 60%;}
.form-heading p { margin: 0;}

#cf7-area input[type="text"],#cf7-area input[type="email"],#cf7-area input[type="tel"],#cf7-area textarea { background: #F0F8FF; width:92%; height: 30px; margin-left:10px; border: none; font-size: 16px; padding: 3%;}
#cf7-area input[type="text"]:focus,#cf7-area input[type="email"]:focus,#cf7-area input[type="tel"]:focus,#cf7-area textarea:focus { background: #FFF; border: none; outline: 0;}
#cf7-area input[type="checkbox"], #cf7-area input[type="radio"]{ appearance: auto;}
#cf7-area .wpcf7-list-item { display: block;}

#cf7-area textarea {height:200px; padding: 3%; width: 92%;}

.cf7-accept-check p {
text-align: center !important;
margin: 10px auto 30px !important;
}

.cf7-submit {
width: 40%;
margin: 0 auto;
text-align: center;
}

#cf7-area input[type="submit"]
{
width: 100%;
background-color: #ec4820;
color: #ffffff;
border-radius: 5px;
font-size: 1em;
padding: 1em 10px;
	border: none;
}

#cf7-area input[type="submit"]:hover
{
background-color:#ffffff;
border: 2px solid #191970;
color:#191970;
}

.cf7-btn{
width: 40%;
margin: 0 auto;
text-align: center;
}


.cf7-req{
font-size:.8em;
padding: 0px 5px;
background: #eb2a2a;
color: #ffffff;
margin-left: 10px;
display:inline-block;
}

@media screen and (max-width:768px){
	
	.cf7-item {display: block;}
	#cf7-area label{display: block;margin-bottom: 10px;}
	.cf7-q { width: 100%;margin: 0;}
	.cf7-a {width: 100%;}
	#cf7-area input[type="text"], #cf7-area input[type="email"], #cf7-area input[type="tel"], #cf7-area textarea{ margin-left: 0;}
	.cf7-submit{width: 90%;}

}