@charset "utf-8";

h3.leadtxt { font-size: 24px; padding: 0 0 30px; text-align: center; font-weight: bold; }

.title { text-align: center; padding: 0 0 50px; }
.title img { display: block; margin: 0 auto; }
.title span { display: block; font-size: 16px; letter-spacing: 2px; }

.bnr { padding: 0 0 30px; }
.bnr p { font-size: 14px; line-height: 260%; padding: 15px 0 0; }

#fv { background: url(../images/3dcg/fv.jpg) center top no-repeat; padding: 140px 0 150px;background-size: cover;}
#fv h2 span { color: #fff; }

#gallery { padding: 90px 0 80px; border-bottom: 1px solid #c9c9c9; }
#gallery .youtube_box{display: flex; flex-wrap: wrap; gap: 10px; }
#gallery .youtube_box .box{width: 490px; height: auto; position: relative; padding: 28% 0 0  ;}
#gallery .youtube_box .box iframe{position: absolute;top: 0px; width: 100%; height: 100%;}

#gallery ul{padding: 45px 0 0;}
#gallery li { width: calc((100% - 40px) / 3); float: left; margin: 0 20px 20px 0; position: relative; cursor: pointer; }
#gallery li::before { content: ""; position: absolute; display: block; width: 21px; height: 21px; background: url(../images/photograohy/icon_01.png) center center no-repeat; bottom: 10px; right: 10px; }
#gallery li:nth-of-type(3n + 3) { margin: 0 0 20px; }
#gallery li img { width: 100%; height: auto; }
#gallery h3 span { padding: 15px 0 0; }
#gallery h4 { font-size: 24px; text-align: center; font-weight: bold; padding: 0 0 10px; }
#gallery p { font-size: 16px; text-align: center; padding: 0 0 60px; }
#gallery h5 { font-size: 22px; }
.iziModal-content img { width: 100%; height: auto; }

#main_contact { text-align: center; font-family: "Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif; padding: 100px 0 0 0;}
#main_contact .inner { width: 790px; margin: 0 auto;}
#main_contact .title { padding: 0 0 40px; }
#main_contact p { font-size: 14px;}
#main_contact .tell_box { border: 5px solid #eeeeee; padding: 20px 0 25px;}
#main_contact .tell_box h4 { font-size: 21px; font-weight: bold;}
#main_contact .tell_box p.number a { font-family: Helvetica; font-size: 48px; font-weight: bold; line-height: 130%;}
#main_contact .tell_box p.number a img { padding: 0 10px 10px 0;}
#main_contact .tell_box p.time span { background: #383838; color: #fff; padding: 0 10px; display: inline-block; *display: inline; *zoom: 1; margin: 0 10px 0 0; font-size: 12px;}
#main_contact .howto { background: #eeeeee; padding: 20px 0; font-size: 14px; font-weight: bold; margin: 35px 0 70px;}
#main_contact .howto span { color: #f0000f;}
#main_contact table { width: 85%; margin: 0 auto; font-size: 14px;}
#main_contact table tr th { width: 195px; text-align: left; padding: 20px 2% 10px 0; vertical-align: top; margin: 0 0 10px; font-weight: bold;}
#main_contact table tr th span { color: #f0000f;}
#main_contact table tr td { text-align: left; padding: 10px 0;}
#main_contact table tr td input[type="text"],
#main_contact table tr td textarea { width: 96%; border: none; background: #f3f3f3; padding: 10px 2%;
border-radius: 4px; 
-moz-border-radius: 4px; 
-webkit-border-radius: 4px;}
#main_contact input[type="submit"] { width: 260px; height: 50px; line-height: 50px; color: #fff; font-size: 14px; background: #dd0016; margin: 70px 0 140px;
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;}
#main_contact .tell_box p.alert { color: red; padding: 20px 0 0; }

#contact { width: 790px; margin: 0 auto; }
#contact h3 { font-size: 30px; text-align:center; }
#contact p.lead { font-size: 14px; padding: 30px; text-align:center;}
#contact #contact-form .tel h4 { font-size: 21px; }
#contact #contact-form .tel { text-align: center; border: 5px solid #e9e9e9; padding: 30px 0; }
#contact #contact-form .tel p span { font-size: 34px; font-weight: bold; }

#contact-form { padding: 0 0 50px 0;  }
#contact-form h3#contact-h { font-size: 20px; background: url(../images/contact/h_01.png) no-repeat center top; text-align: center; padding: 70px 0 0;}
#contact-form h3#catalog-h { font-size: 20px; background: url(../images/catalog/h_01.png) no-repeat center top; text-align: center; padding: 70px 0 0;}

input[type="text"],
textaera	{ border: 1px solid #b5b5b5; }
input[type="submit"] { -webkit-appearance: button; cursor: pointer; padding: 0; border: none; }

/* ------------------------------------------------------------ forms */

textarea,
input[type="text"] { background: #f3f3f3; border: none; padding: 10px; 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; }
textarea { width: 96%; }
input[type="text"] { width: 96%; }

#form { background: #fff; padding: 45px 0 45px; }
#form h4 { font-size: 25px; padding: 20px 0; text-align: center;}
#form #notice {  font-weight: bold; text-align: center; padding: 25px 0; background: #e9e9e9; }
#form #notice span,
#form table th span { color: #ec0000; }
#form table { width: 100%; margin: 30px 0 0; }
#form table th { font-weight: bold; vertical-align: top; text-align: left; width: 200px; padding: 25px 0 0; font-size: 14px;}
#form table td { padding: 15px 0; font-size: 14px;}
#form table td span { font-size: 12px; }
#form table td label { display: inline-block; *display: inline; *zoom: 1; width: 45%; }
#form table td p { font-size: 14px; }

#form .submit { text-align: center; padding: 30px 0 40px; }
#form .submit input[type="submit"],
#form .submit .back { display: inline-block; *display: inline; *zoom: 1; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: none; color: #fff; width: 260px; height: 50px; line-height: 50px; margin: 5px; font-size: 14px; font-weight: bold; vertical-align: top; }
#form .submit input[type="submit"] { background: #dd0016; }
#form .submit .back { background: #ccc; }

#form .alert { padding: 60px; }
#form .alert span { display: block; color: #ec0000; font-size: 16px;}
#form table.confirm th { padding: 10px 0; }
#form table.confirm td { padding: 10px 0 30px; }

#entry { margin-top: 50px; padding: 50px 0; text-align: center; }
#entry .g-btn { padding: 30px 0 0; }
#entry h4 { font-size: 25px; padding: 20px 0; text-align: center;}
#entry .thanks { font-size: 18px; text-align: center; }
/* ------------------------------------------------------------ mobile */

@media only screen and (max-width:640px){

h3.leadtxt { font-size: 18px; }

#fv { padding: 80px 0; background-size: cover;}
#fv h2 span { font-size: 16px; line-height: 130%; position: relative; display: block; }

.title { text-align: center; padding: 0 0 30px; }
.title img { height: 40px; width: auto; }
.title span { font-size: 14px; }

.bnr { padding: 0 0 30px; }
.bnr img { width: 100%; height: auto; }
.bnr p { font-size: 14px; line-height: 200%; }

#fv { background: url(../images/3dcg/fv.jpg) center top no-repeat; background-size: cover;}

#gallery { padding: 60px 0 25px; }

#gallery .youtube_box{    display: flex;    flex-direction: column;}
#gallery .youtube_box .box{width: 100%; padding: 56% 0 0; }
#gallery ul {    padding: 22px 0 0;}

#gallery h4 { font-size: 18px; padding: 0 0 5px; }
#gallery p { font-size: 14px; padding: 0 0 40px; }
#gallery h5 { font-size: 18px; }
#gallery li { width: calc((100% - 10px) / 2); float: left; margin: 0 10px 10px 0; }
#gallery li:nth-of-type(3n + 3) { margin: 0 10px 10px 0; }
#gallery li:nth-of-type(2n + 2) { margin: 0 0 10px; }
#gallery li::before { content: ""; width: 10px; height: 10px; background: url(../images/photograohy/icon_01.png) center center no-repeat; bottom: 5px; right: 5px; background-size: contain; }
#gallery h3 span { padding: 10px 0 0; }
.iziModal { width: 94%; }

#main_contact { padding: 30px 0 0; }
#main_contact .inner { width: 94%;}
#main_contact h3 { padding: 20px 0 30px;}
#main_contact .tell_box h4 { font-size: 18px;}
#main_contact .tell_box p.number a { font-size: 32px;}
#main_contact .tell_box p.number img { width: 20px; height: auto;}
#main_contact .tell_box p.time span { display: block; margin: 0 3% 5px;}
#main_contact .howto { margin: 20px 0 30px; padding: 15px; text-align: left;}
#main_contact table { width: 100%;}
#main_contact table tr th { width: 100%; padding: 10px 0; vertical-align: middle; margin: 0; display: block; float: left;}
#main_contact table tr td { display: block; padding: 10px 0; float: left; width: 100%;}
#main_contact table tr td input[type="text"] { margin: 0;}
#main_contact input[type="submit"] { margin: 20px 0 80px;}

#contact { width: inherit; margin: 0 auto; }
#contact h3 { font-size: 30px; text-align:center; }
#contact p.lead { font-size: 14px; padding: 30px; text-align:center;}
#contact #contact-form .tel h4 { font-size: 21px; }
#contact #contact-form .tel { text-align: center; border: 5px solid #e9e9e9; padding: 30px 0; }
#contact #contact-form .tel p span { font-size: 30px; font-weight: bold; }

#contact-form { padding:  0; background: #fff;}
#contact-form h3#contact-h { font-size: 20px; background: url(../images/contact/h_01.png) no-repeat center top; background-size: 140px auto; text-align: center; padding: 50px 0 0; margin-bottom: 30px;}
#contact-form h3#catalog-h { font-size: 20px; background: url(../images/catalog/h_01.png) no-repeat center top; background-size: 140px auto; text-align: center; padding: 50px 0 0; margin-bottom: 30px;}

textarea,
input[type="text"] { width: 96%; padding: 10px 2%;}

#form { padding: 25px 3% 45px; }
#form #notice { padding: 15px 3%; }
#form table th { width: 100%; display: block; font-size: 16px; line-height: 130%;}
#form table td { display: block; padding: 10px 0 0;}
#form table td p { font-size: 12px; }
#form table td label { padding: 0 0 10px;}

#form .submit input[type="submit"],
#form .submit .back { display: inline-block; *display: inline; *zoom: 1; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: none; color: #fff; width: 260px; height: 50px; line-height: 50px; margin: 5px; font-size: 14px; font-weight: bold; vertical-align: top; }
#form .submit input[type="submit"] { background: #dd0016; }
#form .submit .back { background: #ccc; }

#form .alert { padding: 20px 0; }
#form .alert span { display: block; color: #ec0000; }
#form table.confirm th { padding: 10px 0; }
#form table.confirm td { padding: 10px 0 30px; }

}





@media only screen and (orientation : portrait) { 
	#navigation 			{ position: fixed; top:0; margin: 0 0 0; right: 0; left: 0; }
}