html{}
body{
    margin:0px;
    padding:0px;
    font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","ヒラギノ角ゴ Pro W6", "メイリオ","Meiryo",Arial, sans-serif;
    font-size:16px;
    overflow-x:hidden;
    background-color:#ffffff;
    color:#333333;
    line-height:1.6;
    counter-reset: mm mda;
}
.gothic_font{font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;}
.mincho_font{font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;}
a{text-decoration:none;color:#333333;}
a:hover{opacity:0.6;}
img{display:block;vertical-align:bottom;}
br.sp_br{display:none;}
img.sp_img{display:none;}

div.language{
    position:absolute;
    top:10px;
    left:230px;
    cursor: pointer;
}
div.language_button{
    position:relative;
    padding:5px;
}
div.language_button:after{
    content:"";
    background-image: url(../images/language/arrow1.svg);
    background-size:10px 10px;
    background-repeat:no-repeat;
    display:block;
    width:20px;
    height:20px;
    position:absolute;
    top:14px;
    right:-25px;
}
div.language_button:hover:after{
    content:"";
    background-image: url(../images/language/arrow2.svg);
    background-size:10px 10px;
    background-repeat:no-repeat;
    display:block;
    width:20px;
    height:20px;
    position:absolute;
    top:14px;
    right:-25px;
}
div.language_button > img{
    width:100%;
}
div.language_button > div.language_sub{
    display:none;
}
div.language_button:hover > div.language_sub{
    display:block;
    background-color:#ffffff;
    position:absolute;
    width:124px;
    top:33px;
}

div.language_sub > a{
    display:block;
    width:100%;
    padding:3px 0px;
    font-size:1.1em;
    text-align:center;
    color:#333333;
}
div.language_sub > a.now{
    color:#a38a9a;  
}
div.language_sub > a:hover{
    color:#a38a9a;
}

header{
	width:100%;
}
#main{
    position:relative;
    max-height:600px;
    overflow: hidden;
}
#main > img{
    display:block;
    width:100%;
}
div.logo{
    display:block;
    position:absolute;
    width:200px;
    top:10px;
    left:10px;
}
div.left_box{
    display:block;
    position:absolute;
    bottom:0;
    left:0;
}
div.left_box > img{width:100%;display:block;}
div.main_box{
    width:1000px;
    margin:auto;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
div.main_box > h1{
    width:57%;
    margin:0px;
    position:absolute;
    top: 30%;
    -webkit-transform: translateY(-30%); /* Safari用 */
    transform: translateY(-30%);

}
div.main_box > h1 > img{width:100%;}
p.catch_text{
    display:block;
    position:absolute;
    bottom:0;
    color:#ffffff;
    width:100%;
    text-align:center;
    background-color:#ac99ac;
    font-weight:bold;
    border-radius:25px;
    font-size:1.05em;
    padding:5px 0px;
}
div.contents_back_w{
    width:100%;
    padding:30px 0px;
    background-color:#ffffff;
}
div.contents_back_g{
    width:100%;
    padding:30px 0px;
    background-color:#f1f1f3;
}
div.contents_back_a{
    width:100%;
    padding:30px 0px;
    background-color:#f4eff1;
}
div.contents_back_m{
    width:100%;
    padding:30px 0px;
    background-color:#efeef0;
}
div.contents_back_i{
    width:100%;
    padding:30px 0px;
    background-color:#e2e2e4; 
}
div.contents{
    width:95%;
    max-width:1000px;
    margin:0px auto;
}

div.smacere_catch_box{
    display:table;
    width:100%;
}
div.smacere_catch_img{
    display:table-cell;
    text-align:center;
    width:460px;
}
div.smacere_catch_img > p{
    display:table;
    margin:auto;
}
div.smacere_catch_img > p > span{
    display:table-cell;
    vertical-align:middle;
    padding-right:15px;
}
div.smacere_catch_img > p > img{
    display:table-cell;
    vertical-align:middle;
}
div.smacere_catch_text{
    display:table-cell;
    vertical-align:top;
    padding-left:50px;
}
div.smacere_catch_text > p{
    color:#808080;
    line-height:2.5;
    letter-spacing:0.05em;
    padding-bottom:15px;
    font-size:1.2em;
}
a.sample_link{
    color:#dd6d64;
    font-size:1.2em;
    font-weight:bold;
    padding:10px;
    border:1px solid #dd6d64;
    border-radius:20px;
    letter-spacing:0.1em;
    transition:all 0.5s ease;
}
a.sample_link:hover{
    color:#ffffff;
    background-color:#dd6d64;
    opacity:1;
}
a.sample_link > span{
    padding:0px 25px 0px 15px;
}
a.sample_link > span:after{
    content: ">";
    display:inline-block;
    padding-left:20px;
}
h2{
    color:#826783;
    font-size:1.5em;
    letter-spacing:0.1em;
    margin:0px 0px 25px 0px;
    text-align:center;
}
h2.full_title{
    color:#ffffff;
    background-color:#ac99ac;
    padding:5px 0px;
    margin:0px;
}
h2.full_title > strong{
    padding-right:15px;
}
h2.voice_title > span{
    border-bottom:4px solid #AC99AC;
    padding-bottom:15px;
    width:70%;
    display:block;
    margin:auto;
}
h3.sub_title{
    color:#826783;
    font-size:1.7em;
    background-image: url(../images/sub_title.png);
    text-align:center;
    background-repeat:no-repeat;
    background-position:bottom center;
    padding-bottom:30px;
    margin:10px 0px;
    letter-spacing:0.1em;
}

div.service_box{
    width: 1000px;
    display: flex;
    justify-content: space-between;
    margin:auto;
}
div.service_box > h3{
    display:inline-block;
    width:100%;
    margin:0px;
}
div.sample_movie_box{
    width:100%;
    display:flex;
    justify-content: space-between;
    padding:50px 0px 20px 0px; 
}
div.sample_movie_box > div{
    display:inline-block;
    width:34%;
    height:auto;
    overflow:hidden;
    position:relative;
}
div.sample_movie_box > div > img{
    transition:all 0.5s ease;
    width: 100%;
}
div.sample_movie_box > div:hover > img{
    transform: scale(1.1,1.1);
}
div.sample_movie_box > div > div.play_button{
    position:absolute;
    display:block;
    width:70%;
    margin:auto;
    bottom:13%;
    left:0;
    right:0;
}
div.sample_movie_box > div > div.play_button > img{
    width:100px;
    height:100px;
    display:block;
    margin:auto;
}
div.sample_movie_box > div > div.play_button > p{
    font-size:1.6em;
    color:#ffffff;
    font-weight:bold;
    text-align:center;
}

div.sample_movie_box > div > a{
    position:absolute;
    display:block;
    top:0;
    width:100%;
    height:100%;
}

div.movie_box{
    width:100%;
    display:block;
    text-align:center;
    padding:50px 0px 20px 0px; 
}
div.movie_box > div{
    display:inline-block;
    height:auto;
    overflow:hidden;
    position:relative;
}
div.movie_box > div > img{
    transition:all 0.5s ease;
    width: 100%;
    display:block;
}
div.movie_box > div > img:before{
    background-color: rgba(0,0,0,0.4);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
}
div.movie_box > div:hover > img{
    transform: scale(1.1,1.1);
}
div.movie_box > div > div.play_button{
    position:absolute;
    display:block;
    width:70%;
    margin:auto;
    bottom:35%;
    left:0;
    right:0;
}
div.movie_box > div > div.play_button > img{
    width:100px;
    height:100px;
    display:block;
    margin:auto;
}
div.movie_box > div > div.play_button > p{
    font-size:1.6em;
    color:#ffffff;
    font-weight:bold;
    text-align:center;
}

div.movie_box > div > a{
    position:absolute;
    display:block;
    top:0;
    width:100%;
    height:100%;
}


p.dev_check{
    text-align:right;
    font-size:0.9em;
}
div.char_box{
    width:950px;
    display:table;
    margin:5px 0px;
    padding:5px 25px;
    border:3px solid #f1f1f3;
    border-radius:15px;
}
div.char_box > div.icon{
    display:table-cell;
    width:110px;
    text-align:center;
    vertical-align:middle;
}
div.char_box > div.icon > img{width:100%;}
div.char_box > div.point{
    display:table-cell;
    width:100px;
    padding:0px 15px;
    text-align:center;
    vertical-align:middle;
}
div.char_box > div.point > img{width:100%;}
div.char_box > div.detail{
    display:table-cell;
    vertical-align:middle;
    padding-left:10px;
}
div.char_box > div.detail > h3{
    color:#406aa4;
    font-size:1.4em;
    margin:10px 0px;
}
div.char_box > div.detail > p{
    margin: 0px;
    letter-spacing:0.1em;
}
div.char_img{
    width:100%;
    display:flex;
    justify-content: space-between;
    padding:10px 0px 20px 0px;
}
div.char_img > div{
    width:100%;
}
div.problem_box{
    width:100%;
    display:flex;
    justify-content: space-between;
    padding:10px 0px 20px 0px;
}
div.problem{
    display:inline-block;
    width:19%;
}
div.problem > div.title{
    background-image: url(../images/problem/back.svg);
    background-repeat:no-repeat;
    background-size:100% 100%;
    height:195px;
    width:100%;
    display:table;
}
div.problem > div.title > h4{
    text-align:center;
    color:#406aa4;
    margin:0px;
    font-weight:normal;
    display:table-cell;
    width:100%;
    vertical-align:middle;
    font-size:1.4em;
}
div.problem > div.images{
    margin-top:-15px;
}
div.problem > div.images img{width:100%;}
div.problem_catch{
    background-image:url(../images/problem/catch.svg);
    background-repeat:no-repeat;
    background-size:cover;
    width:100%;
    height:200px;
    position:relative;
    margin-bottom:50px;
}
div.problem_catch > p{
    color:#ffffff;
    background-color:#ac99ac;
    display:inline-block;
    font-size:1.8em;
    text-align:center;
    padding:0px;
    font-weight:bold;
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    margin:auto;
    width:670px;
    height:70px;
    line-height:2.6;
    letter-spacing:0.1em;
}

div.support_box{
    width:100%;
    display:flex;
    justify-content: space-between;
    padding:15px 0px 20px 0px;
}
div.support_box > div.support{
    display:inline-block;
    width:240px;
}
div.support > div.icon{
    text-align:center;
}
div.support > div.point{
    text-align:center;
    margin-top:-15px;
}
div.support > div.title{
    display:table;
    width:100%;
    height:60px;
}
div.support > div.title > h4{
    text-align:center;
    color:#826783;
    margin:0px;
    font-size:1.5em;
    letter-spacing:0.1em;
    line-height:1.3;
    display:table-cell;
    vertical-align:middle;
}
div.support > div.point > img{
    width:80px;
    margin:auto;
}
div.support > div.detail{
    padding:5px 10px;
    color:#111111;
    font-size:0.9em;
}
div.support > div.detail > span{
    font-size:0.9em;
}

div.voice_contents{
    width:100%;
    display:flex;
    justify-content: space-between;
    padding:15px 0px 20px 0px; 
}
div.voice_box > p.age{
    color:#ffffff;
    text-align:center;
    background-color:#ac99ac;
    border-radius:15px;
    font-weight:bold;
    width:200px;
    margin:auto;
}
div.voice{
    display:table;
    width:90%;
    margin:15px auto;
}
div.voice > div.voice_img{
    display:table-cell;
    width:45%;
    vertical-align:middle;
}
div.voice > div.voice_text{
    display:table-cell;
    vertical-align:top;
    padding-left:15px;
    color:#111111;
}

div.inquiry{
    width:850px;
    margin:0px auto;
}
div.inquiry > p{
    color:#593459;
    background-color:#ffffff;
    border-radius:20px;
    padding:5px 0px;
    text-align:center;
    font-size:1.3em;
    font-weight:bold;
}
div.inquiry_box{
    display:table;
    width:80%;
    margin:15px auto;
}
div.inquiry_box > div.tel{
    display:table-cell;
    width:50%;
    vertical-align:middle;
}
div.inquiry_box > div.mail_link{
    display:table-cell;
    text-align:center;
    vertical-align:top;
    padding:0px 15px;
}
div.inquiry_box > div.mail_link > a{
    background-color:#593459;
    display:block;
    width:290px;
    padding:15px 20px;
}
div.inquiry_box > div.mail_link > a > img{
    width:70%;
    margin:auto;
}

div.service_detail_box{
    background-color:#f4eff1;
    padding:15px 30px;
    border-radius:20px;
}
.service_detail_img img{width:100%;}
div.title_box{
    display:table;
    width:100%;
    padding:5px 0px 15px 0px;
}
div.title_box > h3{
    display:table-cell;
    color:#826783;
    font-size:1.7em;
    letter-spacing:0.1em;
    vertical-align:middle;
}
div.title_box > p{
    display:table-cell;
    vertical-align:middle;
}
h3.sub_catch{
    background-color:#ac99ac;
    text-align:center;
    color:#ffffff;
    width:70%;
    margin:15px auto;
    border-radius:15px;
}
div.sample_box{
    background-color:#ffffff;
    border-radius:15px;
    padding:10px 15px;
}
div.sample_box_sp{display:none;}
div.sample{
    display:table;
    width:100%;
}
div.sample > div.text{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    width:200px;
}
div.sample > div.text > img{
    width:85%;
    margin:auto;
}
div.sample > div.text > a{
    text-align:center;
    display:block;
    padding:10px 0px 0px 0px;
}
div.sample > div.images{
    display:table-cell;
    vertical-align: middle;
    width:350px;
    padding:0px 15px;
}
div.sample > div.images > img{width:100%;}
div.sample > div.link{
    display:table-cell;
    vertical-align:top;
    text-align:center;
}
div.sample > div.link > p{
    display:table;
    margin:40px auto 35px auto;
}
div.sample > div.link > p > span{
    display:table-cell;
    vertical-align:middle;
    padding-left:15px;
    text-align:left;
}
div.sample > div.link > p > img{
    display:table-cell;
    vertical-align:middle;
}
div.sample > div.link > a.sample_link{
    background-color:#dd6d64;
    color:#ffffff;
}
div.sample > div.link > a.sample_link:hover{
    background-color:#ffffff;
    color:#dd6d64;
}

h3.flow_catch{
    color:#826783;
    font-size:1.7em;
    text-align:center;
    margin:10px 0px;
    letter-spacing:0.1em;
}
div.flow{
    display:table;
    width:100%;
    margin:15px 0px;
}
div.flow > div.images{
    display:table-cell;
    width:360px;
    vertical-align:top;
}
div.flow > div.text{
    display:table-cell;
    vertical-align:top;
    padding-left:25px;
}
div.flow > div.text > h4{
    color:#406aa4;
    margin:5px 0px;
    font-size:1.3em;
}
div.flow > div.text > h4:after{
    content: "】";
    display:inline-block;
    padding-left:5px;
}
div.flow > div.text > h4:before{
    content: "【";
    display:inline-block;
    padding-right:5px;
}
div.flow > div.text > p{
    padding-left:10px;
    margin:5px 0px;
    font-size:1.1em;
}
div.flow > div.text > div.icon_box{
    display:table;
    width:100%;
    margin:10px 0px;
}
div.flow > div.text > div.icon_box > div.icon{
    display:table-cell;
    width:80px;
    padding:0px 10px;
    vertical-align:top;
}
div.flow > div.text > div.icon_box > div.icon > img{width:100%;}
div.flow > div.text > div.icon_box > div.text{
    display:table-cell;
    vertical-align:top;
    padding-top:10px;
    font-size:1.05em;
}
div.flow > div.text > div.icon_box > div.text > span{
    font-size:0.8em;
}
div.flow > div.text > div.icon_box > div.text > div.card{
    width:100%;
    float:right;
    padding-top:5px;
    display:table;
}
div.flow > div.text > div.icon_box > div.text > div.card > span{
    display:table-cell;
    vertical-align:middle;
    padding-right:15px;
}
div.flow > div.text > div.icon_box > div.text > div.card > img{
    display: table-cell;
    width: 200px;
    height:37px;
    vertical-align: top;
}
div.flow_arrow{
    width:360px;
}
div.flow_arrow > img{
    width:20%;
    margin:auto;
}
p.flow_check{
    text-align:right;
    font-size:0.8em;
}
div.flow > div.text > p.flow_check{
    font-size:0.8em;
}
div.flow > div.text > p.flow_point{font-size:0.8em;}

div.memorial_movie_title{
    display:table;
    width:100%;
}
div.memorial_movie_title > div.text{
    display:table-cell;
    padding-right:80px;
    padding-top:65px;
}
div.memorial_movie_title > div.text > h3{
    margin:10px 0px;
    text-align:left;
}
div.memorial_movie_title > div.text > p.kana{
    margin:25px 0px;
    width:60%;
}
div.memorial_movie_title >div.text > p.catch{
    width:100%;
}
div.memorial_movie_title >div.text > p.point{
    width:100%;
    margin-top:50px;
}
div.memorial_movie_title > div.images{
    display:table-cell;
    width:50%;
    vertical-align:top;
}
p.memorial_text{
    font-weight:bold;
    font-size:1.1em;
}
div.sp_img_catch{display:none;}
.memorial_movie{color:#6d6039;}
.memorial_digital_album{color:#565b8b;}
div.memorial_flow{
    display:table;
    width:100%;
}
div.memorial_flow > div.images{
    display:table-cell;
    width:360px;
    vertical-align:top; 
}
div.memorial_flow > div.text {
    display: table-cell;
    vertical-align: top;
    padding-left: 25px;
}
dl.memorial_list{
    margin:0px;
}
dl.memorial_list dt{
    font-size:1.2em;
    font-weight:bold;
    padding:5px 0px;
}
dl.m_m dt > span{
    border-bottom:1px solid #6d6039;
    padding-bottom:8px;
    width:100%;
    display:table-cell;
}
dl.m_m dt:before{
    border-left:8px solid #6d6039;
    display:table-cell;
    counter-increment:mm;
    content: counter(mm)".";
    padding-left:12px;
    padding-right:5px;
}
dl.mda dt > span{
    border-bottom:1px solid #565b8b;
    padding-bottom:8px;
    width:100%;
    display:table-cell;
}
dl.mda dt:before{
    border-left:8px solid #565b8b;
    display:table-cell;
    counter-increment:mda;
    content: counter(mda)".";
    padding-left:12px;
    padding-right:5px;
}
dl.memorial_list dd{
    color:#111111;
    font-size:1em;
}

div.memorial_digital_album_title{
    display:table;
    width:100%;
}
div.memorial_digital_album_title > div.text{
    display:table-cell;
    padding-right:80px;
    padding-top:65px;
}
div.memorial_digital_album_title > div.text > h3{
    margin:10px 0px;
    text-align:left;
}
div.memorial_digital_album_title > div.text > p.kana{
    margin:25px 0px;
    width:80%;
}
div.memorial_digital_album_title >div.text > p.catch{
    width:98%;
}
div.memorial_digital_album_title > div.images{
    display:table-cell;
    width:50%;
    vertical-align:top;
}
div.memorial_digital_album_point{
    display:table;
    width:100%;
}
div.memorial_digital_album_point > div.point_text{
    display:table-cell;
    padding-right:80px;
}
div.memorial_digital_album_point > div.point_catch{
    display:table-cell;
    width: 50%;
}

h2.special{
    background-color:#ffffff;
    border-radius:15px;
}
h2.special_sp{display:none;}
div.special_box{
    display:table;
    width:100%;
}
div.special_box > div.title{
    display:table-cell;
    width:300px;
    padding-right:50px;
    vertical-align:top;
}
div.special_box > div.text{
    display:table-cell;
    vertical-align:middle;
}

div.special_detail > h3.title{
    display:table;
    padding:15px 0px;
    padding-left:120px;
    position:relative;
}
div.special_detail > h3.title:before{
    background-size:contain;
    background-repeat: no-repeat;
    content:"";
    display:block;
    position:absolute;
    top:-10px;
    left:5px;
    width:100px;
    height:72px;
}
div.special_detail > h3.mm{
    width:55%;
}
div.special_detail > h3.mm:before{
    background-image: url(../images/memorial-movie/main.svg);
}
div.special_detail > h3.mda:before{
    background-image: url(../images/memorial-digital-album/main.svg);
    top:3px;
}

div.special_detail > h3.title > div.text{
    display:table-cell;
    width:50%;
    padding-right:25px;
    vertical-align:bottom;
}
div.special_detail > h3.mm > div.text > img{
    height:30px;
}
div.special_detail > h3.mda > div.text > img{
    height:40px;
}
div.special_detail > h3.title > div.kana{
    display:table-cell;
    width:50%;
    vertical-align:bottom;
}
div.special_detail > h3.title > div.kana > img{width:80%;}
div.special_detail > h3.mda > div.kana > img{padding-bottom:10px;}

footer{
    width:100%;
    text-align:center;
    padding:10px 0px;
    padding-bottom:90px;
}
#footer{
    width:100%;
    max-width:1000px;
    margin:auto;
    position:relative;
    font-size:0.9em;
}
#footer > a.logo{
    display:inline-block;
    width:129px;
    position:absolute;
    top:0;
    left:-2%;
}
#footer > p{
    margin:0px;
}
#page_top_button{
    width:1000px;
    position:fixed;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#page_top_button > a{
    width:50px;
    display:inline-block;
    position:absolute;
    right:-70px;
}
#right_banner{
    width:100%;
    position:fixed;
    bottom:0;
    background-color:#E2E2E4
}
#right_banner > div.pc_banner{
    display:table;
    width:1000px;
    margin:auto;
    padding:10px 0px 0px 0px;
}
#right_banner > div.pc_banner > div.tel{
    display:table-cell;
    width:33%;
    text-align:center;
    vertical-align: middle;
}
#right_banner > div.pc_banner > div.company{
    display:table-cell;
    width:33%;
    text-align:center;
    vertical-align: middle;
}
#right_banner > div.pc_banner > div.customer{
    display:table-cell;
    width:33%;
    text-align:center;
    vertical-align: middle;
}
#right_banner > div.pc_banner > div > a{
    width:90%;
    display:inline-block;
    margin:auto;
}

#right_banner > div.sp_banner{display:none;}

@media screen and (min-width: 1900px){
    div.main_box > h1{
        width:76%;
    }
}
@media screen and (min-width: 2500px){
    div.main_box > h1{
        width:88%;
        top:32%;
    }
}
@media screen and (max-width:1200px){
    div.main_box > h1{
        width:45%;
        left:20%;
    }
    #footer > a.logo{
        left:-20px;
    }
    #page_top_button > a{
        right:-35px;
    }
}
@media screen and (max-width:1050px){
    p.catch_text{
        font-size:1em;
    }
    #footer > a.logo{
        left:5px;
    }
    #page_top_button > a{
        right:0;
    }
    div.sample_movie_box > div > div.play_button > p{
        font-size:1.4em;
    }
}
@media screen and (max-width:999px){
    div.main_box{width:100%;}
    div.main_box > h1 {
        width: 38%;
        left: 25%;
    }
    p.catch_text{
        font-size:0.8em;
    }
    div.contents{width:100%;}
    div.service_box{width:100%;}
    div.char_box{
        width: 90%;
        margin: 5px auto;
    }
    div.problem > div.title > h4{font-size:1.2em;}
    #right_banner > div.pc_banner{
        width:100%;
    }
    #page_top_button{
        width:100%;
    }
}
