@charset "UTF-8";

/*!
Theme Name: 防災meサービス紹介テーマ
Description: 防災meサービス紹介テーマです。
Author: 防災me運営事務局
Template:   cocoon-master
Version:    1.1.3
*/

/*basis_color*/
:root {
--basis_color: #3176C4;
}
/*end basis_color*/

/*basis_font*/
.content{
font-family: 'Noto Sans JP', sans-serif;
}
/*end basis_font*/

/*whole*/
main.main{
padding: 0px;
}
main.main, div.sidebar{
padding: 0px !important;
}
.main {
max-width: 600px;
margin: 0 auto !important;
}
@media screen and (min-width: 600px){
.main {
border-left: 6px solid #0253e5 !important;
border-right: 6px solid #0084f2 !important;
}
}
.content {
margin-top: 0px !important;
}
.header-container{
height: 100px;
}
.footer{
margin-top: 0px !important;
}
.site-logo-image.header-site-logo-image {
height: 80px;
width: auto;
}
.no-sidebar .content .main{
padding-top: 0px !important;
}
.go-to-top{
bottom: 60px;
right: 15px;
}
.go-to-top .go-to-top-button{
color: var(--theme-color);
background-color: #ffffff70;
border: 2px solid var(--theme-color);
}
div#content {
background: linear-gradient(rgb(0 0 0/0%),rgb(0 0 0/0%)),url(https://service.bousai.me//assets/images/top/bousai.me_service_bg_pc.jpg);
background-size: cover;
background-position: center;
}
/*end whole*/

/*hero*/
.hero {
height: 60vh;
background: linear-gradient(rgb(0 0 0/0%),rgb(0 0 0/10%)),url(https://service.bousai.me/assets/images/top/bousai.me_service_hero_bg.jpg);
background-size: cover;
background-position: center;
padding-bottom: 1px;
display: block;
}
.hero_h1 {
font-size: 34px;
font-weight: 700;
line-height: 1.4;
color: white;
padding-top: 20px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 20px;
width: fit-content;
z-index: 1;
}
.hero_p {
font-size: 15px;
padding-left: 30px;
padding-right: 30px;
margin-bottom: 70px;
color: white;
}
.hero_text_box {
display: flex;
flex-direction: column;
position: absolute;
top: 22px;
}
.hero_person_div {
position: absolute;
top: 300px;
right: 17px;
display: none;
}
.hero_person_img {
height: 190px;
width: auto;
}
.hero_btn {
color: white;
width: fit-content;
border: 2px solid #ffffff ;
background-color: #ffffff0f;
padding: 6px;
padding-left: 10px;
padding-right: 10px;
margin-left: 30px;
margin-top: 30px;
text-decoration: none;
font-weight: 500;
font-size: 17px;
position: absolute;
bottom: 1px;
}
.hero_square {
height: 200px;
width: 200px;
background: #3176c43d;
position: absolute;
right: 0px;
}
/*end hero*/

/*problem_solving*/
.problem_solving {
background-color: rgb(247, 247, 247);
padding: 20px;
padding-top: 25px;
margin-top: 50px;
}
.problem_solving_h1 {
color: var(--basis_color);
text-align: center;
font-size: 22px;
font-weight: 600;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 30px;
}
.problem_solving_contents_div {
background: #ffffff;
border-radius: 8px;
box-shadow: 2px 4px 12px rgb(0 0 0 / 10%);
margin-top: 15px;
margin-bottom: 15px;
padding: 17px;
}
.problem_solving_contents_h1 {
text-align: center;
font-size: 18px;
margin-bottom: 7px;
}
.problem_solving_contents_p {
font-size: 15px;
font-weight: 400;
}
/*end problem_solving*/

/*feature*/
.feature {
background-color: #e8f3ff;
padding: 20px;
}
.feature_h1 {
text-align: center;
font-size: 33px;
margin-top: -20px;
margin-bottom: 10px;
letter-spacing: 6px;
font-weight: 600;
}
.feature_h1_strong {
color: var(--basis_color);
font-size: 55px;
font-weight: 800;
}
.feature_p {
text-align: center;
font-size: 21px;
font-weight: 500;
}
.feature_session_count_div {
background-color: var(--basis_color);
width: fit-content;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 8px;
padding-right: 8px;
border-radius: 4px;
color: white;
font-weight: 600;
}
.feature_session_img {
width: fit-content;
height: 222px;
object-fit: cover;
}
.feature_session_h1 {
font-size: 26px;
}
.feature_session_p {
font-size: 15px;
}
/*end feature*/


/*precedent*/
.precedent {
margin-top: 30px;
}
.precedent_h1 {
text-align: center;
font-size: 30px;
color: var(--basis_color);
}
/*end precedent*/


/*Implementing_company*/
.Implementing_company{
padding: 20px;
}
.Implementing_company_h1 {
text-align: center;
font-size: 27px;
color: var(--basis_color);
}
.Implementing_company_session_group_01 {
display: flex;
margin-top: 20px;
}
.Implementing_company_session_group_02 {
display: flex;
margin-top: 2px;
}
.Implementing_company_session_img {
border: 1px solid #cfcfcf;
}
.Implementing_company_session01 {
margin-right: 5px;
}
.Implementing_company_session02{
margin-left: 5px;
}
/*end Implementing_company*/


/*flow*/
.flow{
background-color: rgb(247, 247, 247);
margin-top: 20px;
padding: 20px;
}
.flow_h1 {
text-align: center;
font-size: 25px;
color: var(--basis_color);
}
/*end flow*/


/*faq*/
.faq{
margin-top: 30px;
padding-left: 10px;
padding-right: 10px;
}
.faq_h1 {
text-align: center;
font-size: 30px;
color: var(--basis_color);
}
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_qa {
overflow-x: hidden;
margin: 0 auto;
color: #333333;
}
.cp_qa .cp_actab {
padding: 20px 0;
border-bottom: 1px dotted #cccccc;
}
.cp_qa label {
font-size: 18px;
font-weight: 600 !important;
position: relative;
display: block;
width: 100%;
margin: 0;
padding: 10px 10px 0 48px;
cursor: pointer;
}
.cp_qa .cp_actab-content {
font-size: 15px;
position: relative;
overflow: hidden;
height: 0;
margin: 0 0px;
padding: 0 14px;
-webkit-transition: 0.4s ease;
transition: 0.4s ease;
opacity: 0;
}
.cp_qa .cp_actab input[type=checkbox]:checked ~ .cp_actab-content {
height: auto;
padding: 14px;
opacity: 1;
}
.cp_qa .cp_plus {
color: var(--basis_color);
font-size: 2.4em;
line-height: 100%;
position: absolute;
z-index: 5;
margin: 3px 0 0 10px;
-webkit-transition: 0.2s ease;
transition: 0.2s ease;
}
.cp_qa .cp_actab input[type=checkbox]:checked ~ .cp_plus {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.cp_qa .cp_actab input[type=checkbox] {
display: none;
}
/*end faq*/


/*contact*/
.contact{
background-color: #e8f3ff;
padding: 20px;
margin-top: 30px;
}
.contact_h1 {
text-align: center;
font-size: 30px;
margin-bottom: 0px;
color: var(--basis_color);
}
.contact_square {
height: 200px;
width: 200px;
background: #3176c46b;
position: absolute;
bottom: 1px;
}
.Form {
margin-top: 80px;
margin-left: auto;
margin-right: auto;
max-width: 720px;
}
.Form {
margin-top: 40px;
}
.Form-Item {
padding-top: 24px;
padding-bottom: 24px;
width: 100%;
display: flex;
align-items: center;
}
.Form-Item {
padding-left: 14px;
padding-right: 14px;
padding-top: 16px;
padding-bottom: 16px;
flex-wrap: wrap;
}
.Form-Item-Label {
width: 100%;
max-width: 248px;
letter-spacing: 0.05em;
font-weight: bold;
font-size: 16px;
font-family: 'Noto Sans JP',sans-serif;
}
.Form-Item-Label {
max-width: inherit;
display: flex;
align-items: center;
font-size: 15px;
}
.Form-Item-Label.isMsg {
margin-top: 8px;
margin-bottom: auto;
}
.Form-Item-Label.isMsg {
margin-top: 0;
}
.Form-Item-Label-Required {
border-radius: 6px;
margin-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
width: 48px;
display: inline-block;
text-align: center;
background: var(--basis_color);
color: #fff;
font-size: 14px;
}
.Form-Item-Label-Required {
border-radius: 4px;
padding-top: 2px;
padding-bottom: 2px;
width: 32px;
font-size: 10px;
}
.Form-Item-Input {
border: 2px solid var(--basis_color);
border-radius: 6px;
margin-left: 40px;
padding-left: 1em;
padding-right: 1em;
height: 48px;
flex: 1;
width: 100%;
max-width: 410px;
background: #ffffff;
font-size: 18px;
}
.Form-Item-Input {
margin-left: 0;
margin-top: 18px;
height: 40px;
flex: inherit;
font-size: 15px;
}
.Form-Item-Textarea {
border-radius: 6px;
margin-left: 40px;
padding-left: 1em;
padding-right: 1em;
height: 216px;
flex: 1;
width: 100%;
max-width: 410px;
background: #ffffff;
font-size: 16px;
}
.Form-Item-Textarea {
margin-top: 18px;
margin-left: 0;
height: 200px;
flex: inherit;
font-size: 16px;
}
.Form-Btn {
border-radius: 6px;
margin-top: 32px;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding-bottom: 20px;
width: 280px;
display: block;
letter-spacing: 0.05em;
background: #5bc8ac;
color: #fff;
font-weight: bold;
font-size: 20px;
}
.Form-Btn {
margin-top: 24px;
padding-top: 8px;
padding-bottom: 8px;
width: 160px;
font-size: 16px;
}
input[type=text],input[type=email]{
border: 2px solid var(--basis_color);
font-family: 'Noto Sans JP',sans-serif;
font-size: 16px;
}
input[type=submit]{
border: 2px solid var(--basis_color);
background-color: #ffffff;
color: var(--theme-color);
margin-top: 2em;
font-family: 'Noto Sans JP',sans-serif;
}
.wpcf7-not-valid-tip{
font-family: 'Noto Sans JP',sans-serif;
margin-top: 10px;
font-size: 14px !important;
font-weight: 500 !important;
}
.wpcf7 form.invalid .wpcf7-response-output{
border-color: #dc3232 !important;
font-family: 'Noto Sans JP',sans-serif;
font-weight: 500;
margin-top: -5px;
font-size: 13px !important;
}
select{
font-size: 17px;
border: 2px solid var(--basis_color);
margin-top: 18px;
}
select{
margin-left: 40px;
}
.wpcf7-list-item {
display: inline-block;
margin-top: 4px !important;
margin-left: 0px !important;
}
span.wpcf7-list-item.first {
margin-top: 12px !important;
}
input[type='submit']{
width: 66% !important;
margin: 0 auto !important;
}
input[type='submit'] {
background-color: var(--basis_color) !important;
color: #fff !important;
z-index: 1 !important;
position: relative !important;
}
.Form-Item-Textarea{
position: relative;
z-index: 1;
}
/*end contact*/


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}